<template>
  <div id="cardhgth" class="demo-spin-article">
    <!-- 承运详情 -->
    <Card>
      <div slot="title">
        <div class="edit-head">
          <a @click="goBack" class="back-title">
            <Icon type="ios-arrow-back" />返回
          </a>
        </div>
      </div>
      <!-- <div v-if="orderInfo.orderState != -1">
        <Steps size="small" :current="4" v-if="orderInfo.orderState == 3">
          <Step title="待驾驶员接单"></Step>
          <Step title="待装货"></Step>
          <Step title="运输中"></Step>
          <Step title="待审核(财务)"></Step>
          <Step title="待确认(实际承运人)"></Step>
          <Step v-if="orderInfo.orderState == 5" title="已签收"></Step>
          <Step
            v-if="![5, 6, 7].includes(orderInfo.orderState)"
            title="已签收"
          ></Step>
        </Steps>
        <Steps size="small" :current="3" v-else-if="orderInfo.orderState == 4">
          <Step title="待驾驶员接单"></Step>
          <Step title="待装货"></Step>
          <Step title="运输中"></Step>
          <Step title="待审核(财务)"></Step>
          <Step title="待确认(实际承运人)"></Step>
          <Step v-if="orderInfo.orderState == 5" title="已签收"></Step>
          <Step
            v-if="![5, 6, 7].includes(orderInfo.orderState)"
            title="已签收"
          ></Step>
        </Steps>

        <Steps
          :current="current"
          :key="orderInfo.orderState"
          size="small"
          v-else
        >
          <Step title="待驾驶员接单"></Step>
          <Step title="待装货"></Step>
          <Step title="运输中"></Step>
          <Step title="待审核(财务)"></Step>
          <Step title="待确认(实际承运人)"></Step>
          <Step v-if="orderInfo.orderState == 5" title="已签收"></Step>
          <Step
            v-if="![5, 6, 7].includes(orderInfo.orderState)"
            title="已签收"
          ></Step>
        </Steps>
      </div> -->

      <!-- <div class="box"></div>
      <div style="width: 100%; height: 10px"></div> -->
      <!-- 头像信息 -->
      <div class="informat">
        <div
          style="display: flex; justify-content: space-between; height: 85px"
        >
          <div>
            <div class="waybillnewcarrier">
              <div class="waybillName">
                <span>托运人</span>
              </div>
              <div class="waybilln">
                <img
                  :src="this.waybillAvatar"
                  v-show="this.waybillAvatar != ''"
                  alt=""
                  srcset=""
                />
              </div>
              <div class="waybiInformation">
                <div>
                  <span>{{ this.orderInfo.companyInfoVo.personalName }}</span>
                  <span class="carriervehicleMapName">{{
                    this.orderInfo.companyInfoVo.mobile
                  }}</span>
                </div>
                <div class="waybiInf-company">
                  <span v-if="this.orderInfo.companyInfoVo.companyName != ''">
                    {{ this.orderInfo.companyInfoVo.companyName }}
                  </span>
                  <span
                    style="color: #a9a9a9"
                    v-if="
                      this.orderInfo.companyInfoVo.companyName == '' ||
                      this.orderInfo.companyInfoVo.companyName == null
                    "
                  >
                    未进行企业认证</span
                  >
                </div>
              </div>
            </div>
          </div>

          <div>
            <div class="dertiemWaybill">
              <span
                :class="
                  this.orderInfo.orderState == '0'
                    ? 'implementedWay'
                    : this.orderInfo.orderState == '1'
                    ? 'implementedWay'
                    : this.orderInfo.orderState == '2'
                    ? 'implementedWay'
                    : this.orderInfo.orderState == '3'
                    ? 'AuditFailedWay'
                    : this.orderInfo.orderState == '4'
                    ? 'AuditFailedWay'
                    : this.orderInfo.orderState == '5'
                    ? 'signFor'
                    : this.orderInfo.orderState == '-1'
                    ? 'deeltesWay'
                    : 'deeltesWays'
                "
              >
                {{
                  this.$options.filters["ORDER_STATUS"](
                    this.orderInfo.orderState
                  )
                }}
              </span>
              <p style="color: #999999; width: 150px; margin-left: 10px">
                {{ this.orderInfo.createTime }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="Line"></div>
      <!-- 基本信息 -->
      <!-- <div class="box"></div> -->
      <div style="margin: 20px 0"></div>
      <el-descriptions
        class="margin-top"
        title="货源信息"
        :column="4"
        size="medium"
        border
      >
        <template slot="extra"> </template>
        <el-descriptions-item>
          <template slot="label"> 装货地址： </template>
          {{ orderInfo.beginProvinceName }}
          {{ orderInfo.beginCityName }} {{ orderInfo.beginAreaName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 详细地址 ： </template>

          {{ orderInfo.beginAddress }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template
            slot="label"
            label-class-name="my-label"
            content-class-name="my-content"
          >
            装运范围：
          </template>
          {{ this.orderInfo.pretendEnclosure }} km
        </el-descriptions-item>
        <!-- 公司名称、联系人、联系电话 -->
        <el-descriptions-item>
          <template slot="label"> 发货单位： </template>
          <span
            class="NotFilled"
            v-if="
              this.orderInfo.extractName == '' ||
              this.orderInfo.extractName == null
            "
          >
            未填写
          </span>
          <span v-else>
            {{ this.orderInfo.extractName }}/{{
              this.orderInfo.extracContactName
            }}/ {{ this.orderInfo.extractPhone }}</span
          >
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 卸货地址： </template>
          {{ orderInfo.endProvinceName }}
          {{ orderInfo.endCityName }} {{ orderInfo.endAreaName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 详细地址： </template>
          {{ orderInfo.endAddress }}
        </el-descriptions-item>
        <el-descriptions-item
          label-class-name="my-label"
          content-class-name="my-content"
        >
          <template slot="label"> 签收范围： </template>
          {{ this.orderInfo.dischargeEnclosure }} km
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">收货单位： </template>
          <span
            class="NotFilled"
            v-if="
              this.orderInfo.takeName == '' || this.orderInfo.takeName == null
            "
          >
            未填写
          </span>
          <span v-else>
            {{ this.orderInfo.takeName }}/{{
              this.orderInfo.takeContactName
            }}/{{ this.orderInfo.takePhone }}</span
          >
        </el-descriptions-item>
      </el-descriptions>
      <div style="margin: 10px 0"></div>
      <div>
        <el-descriptions
          class="margin-top SourcIormation"
          :column="5"
          size="medium"
          border
        >
          <template slot="extra">
            <Row class="operation"> </Row>
          </template>
          <!-- 地址 -->
          <el-descriptions-item>
            <template slot="label"> 货源编号： </template>
            {{ orderInfo.goodNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 货品名称： </template>
            {{ orderInfo.goodSubType }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 货物类型： </template>
            {{ orderInfo.goodType | TypeGoods }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 运费单价：</template>
            <span
              class="NotFilled"
              v-if="
                this.orderInfo.driverUnitPrice == null ||
                this.orderInfo.driverUnitPrice == ''
              "
            >
              未填写
            </span>
            <span v-else> {{ this.orderInfo.driverUnitPrice }} 元/吨</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 计价方式：</template>
            <span class="NotFilled" v-if="this.orderInfo.valuationUnit == null">
              未填写
            </span>
            <span v-else>
              {{
                this.orderInfo.valuationUnit == "1"
                  ? "按重量"
                  : this.orderInfo.valuationUnit == "2"
                  ? "按体积"
                  : "按件数"
              }}</span
            >
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 发布重量： </template>
            {{
              orderInfo.totalGoodWeight == null
                ? "0"
                : orderInfo.totalGoodWeight
            }}
            吨
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 剩余重量： </template>
            {{
              orderInfo.surplusWeight == null ? "0" : orderInfo.surplusWeight
            }}
            吨
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 体积： </template>
            {{ orderInfo.volume == null ? "0" : orderInfo.volume }}
            m³
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 件数： </template>
            {{ orderInfo.piece == null ? "0" : orderInfo.piece }}
            件
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 运输要求 ： </template>
            <span
              class="NotFilled"
              v-if="subRemarks == '' || subRemarks == null"
            >
              未填写
            </span>
            <span v-else>
              <Tooltip max-width="200" :content="orderInfo.content">
                {{ subRemarks }}
              </Tooltip>
            </span>
          </el-descriptions-item>
        </el-descriptions>
        <div style="margin: 20px 0"></div>
        <div>
          <el-descriptions
            class="margin-top SourcIormation"
            :column="4"
            size="medium"
            border
          >
          </el-descriptions>
        </div>
      </div>
      <!-- 基本信息 -->
      <div class="box"></div>
      <!-- 订单信息 -->
      <el-descriptions
        class="margin-top"
        title="运单信息"
        :column="4"
        size="medium"
        border
      >
        <el-descriptions-item>
          <template slot="label"> 托运单号： </template>
          {{ orderInfo.orderNo }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 运单来源： </template>
          {{
            orderInfo.orderSource == "1"
              ? "自主抢单"
              : orderInfo.orderSource == "2"
              ? "平台派单"
              : "----"
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 驾驶员： </template>
          <span v-if="orderInfo.driverInfoVo">
            {{ orderInfo.driverInfoVo.nickName }}
          </span>
          <span style="color: #a9a9a9" v-else> 未选择 </span>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 车辆： </template>
          <span v-if="orderInfo.vehicleInfoVo.vehicleNum">
            {{ orderInfo.vehicleInfoVo.vehicleNum }}
          </span>
          <span style="color: #a9a9a9" v-else> 未选择 </span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 预计装车： </template>
          <span
            v-if="
              orderInfo.estimateLoadingTime != '' &&
              orderInfo.estimateLoadingTime != null
            "
            >{{ orderInfo.estimateLoadingTime }}
          </span>
          <span v-else>**-**-** **:**:**</span>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 实际装车： </template>
          <span
            v-if="orderInfo.loadingTime != '' && orderInfo.loadingTime != null"
          >
            <span> {{ orderInfo.loadingTime }}</span>
          </span>
          <span v-else>**-**-** **:**:**</span>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 预计卸车： </template>
          <span
            v-if="
              orderInfo.estimateDischargeTime != '' &&
              orderInfo.estimateDischargeTime != null
            "
            >{{ orderInfo.estimateDischargeTime }}
          </span>
          <span v-else>**-**-** **:**:**</span>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">实际卸车： </template>
          <span
            v-if="
              orderInfo.dischargeTime != '' && orderInfo.dischargeTime != null
            "
          >
            <span> {{ orderInfo.dischargeTime }}</span>
          </span>
          <span v-else>**-**-** **:**:**</span>
        </el-descriptions-item>
      </el-descriptions>
      <!-- 订单信息 -->

      <div class="box"></div>
      <!-- 订单结算   -->

      <div v-if="this.orderInfo.orderState != '0'">
        <div>
          <div style="width: 100%">
            <el-descriptions
              class="margin-top"
              title="结算信息"
              :column="5"
              size="medium"
              border
            >
              <template slot="extra"> </template>
              <el-descriptions-item>
                <template slot="label">配载吨位： </template>
                <span
                  v-if="
                    orderInfo.goodWeight !== '' &&
                    orderInfo.goodWeight != 'null'
                  "
                >
                  {{ orderInfo.goodWeight }} 吨
                </span>
                <span v-else> -- </span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 装车吨位： </template>
                <span
                  v-if="
                    orderInfo.transGoodWeight !== '' &&
                    orderInfo.transGoodWeight != null
                  "
                >
                  {{ orderInfo.transGoodWeight }} 吨
                </span>
                <span v-else> -- </span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 卸车吨位： </template>
                <span
                  v-if="
                    orderInfo.realGoodWeight !== '' &&
                    orderInfo.realGoodWeight != null
                  "
                >
                  {{ orderInfo.realGoodWeight }} 吨
                </span>
                <span v-else> -- </span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 结算吨位：</template>
                <span
                  v-if="
                    orderInfo.realGoodWeight !== '' &&
                    orderInfo.realGoodWeight != null &&
                    orderInfo.transGoodWeight !== '' &&
                    orderInfo.transGoodWeight != null
                  "
                >
                  {{
                    orderInfo.realGoodWeight > orderInfo.transGoodWeight
                      ? orderInfo.transGoodWeight + " 吨"
                      : orderInfo.realGoodWeight + " 吨"
                  }}
                </span>
                <span v-else> -- </span>
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label"> 支付金额： </template>
                {{
                  orderInfo.driverTotalPrice
                    ? orderInfo.driverTotalPrice + " 元"
                    : "--"
                }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <!-- 订单结算 -->
        <!-- 图片 -->
        <div class="box"></div>
        <el-descriptions
          class="margin-top"
          title="单据信息"
          size="medium"
          border
        >
        </el-descriptions>
        <div class="boximg">
          <div style="margin-left: 1%">
            <Row>
              <Col span="6">
                <div class="uploadimg">
                  <div class="uploadimgss">
                    <div>
                      <img
                        style="width: 100px; cursor: pointer"
                        height="100px;"
                        :src="deliveryOrderPicUrl"
                        @click="showPic(1)"
                      /><br />
                      <Upload
                        v-if="
                          orderInfo.orderState == 1 ||
                          orderInfo.orderState == 2 ||
                          orderInfo.orderState == 3
                        "
                        :on-progress="LoadingBill"
                        ref="fontUpload"
                        :beforeUpload="beforeUpload"
                        :show-upload-list="false"
                        :on-success="deliveryHandleSuccess"
                        :format="['jpg', 'jpeg', 'png']"
                        :headers="header"
                        :data="{
                          fileType: 'ORDER_DELIVERY_PIC',
                          userId: userId,
                          orderId: orderId,
                        }"
                        type="drag"
                        :action="uploadOrderPicId"
                        style="
                          border-radius: 15px;
                          display: inline-block;
                          width: 30px;
                          position: relative;
                          top: -105px;
                        "
                      >
                        <div
                          style="width: 30px; height: 30px; line-height: 30px"
                        >
                          <Icon type="ios-camera" size="20"></Icon>
                        </div>
                      </Upload>
                      <div class="demo-uploadcss">
                        <template>
                          <Progress
                            v-if="LoadingBilltrue"
                            text-inside
                            :percent="load"
                            :stroke-width="3"
                          ></Progress>
                        </template>
                      </div>
                    </div>
                    <div class="l-header">
                      <span
                        style="
                          margin-left: -10px;
                          font-size: 14px;
                          display: inline-block;
                          width: 100px;
                          text-align: center;
                          margin-bottom: 5px;
                          margin-top: 80px;
                          font-weight: 800;
                        "
                      >
                        装车磅单
                      </span>
                    </div>
                  </div>
                </div>
              </Col>
            </Row>
          </div>

          <!--  -->
          <div class="row-uploadimg" style="margin-left: 20px">
            <Row>
              <Col span="6">
                <div class="uploadimg">
                  <div class="uploadimgss">
                    <div>
                      <img
                        style="width: 100px; cursor: pointer"
                        height="100px; "
                        :src="receiptOrderPicUrl"
                        @click="showPic(2)"
                      /><br />
                      <Upload
                        v-if="
                          orderInfo.orderState == 1 ||
                          orderInfo.orderState == 2 ||
                          orderInfo.orderState == 3
                        "
                        :on-progress="UnloadingList"
                        :beforeUpload="beforeUpload"
                        ref="fontUpload"
                        :show-upload-list="false"
                        :on-success="receiptHandleSuccess"
                        :format="['jpg', 'jpeg', 'png']"
                        :headers="header"
                        :data="{
                          fileType: 'ORDER_RECEIPT_PIC',
                          userId: userId,
                          orderId: orderId,
                        }"
                        type="drag"
                        :action="uploadOrderPicId"
                        style="
                          border-radius: 15px;
                          display: inline-block;
                          width: 30px;
                          position: relative;
                          top: -105px;
                        "
                      >
                        <div
                          style="width: 30px; height: 30px; line-height: 30px"
                        >
                          <Icon type="ios-camera" size="20"></Icon>
                        </div>
                      </Upload>
                      <div class="demo-uploadcss">
                        <template>
                          <Progress
                            v-if="UnloadingListtrue"
                            text-inside
                            :percent="load"
                            :stroke-width="3"
                          ></Progress>
                        </template>
                      </div>
                    </div>
                    <div class="l-header">
                      <span
                        style="
                          margin-left: -10px;
                          font-size: 14px;
                          display: inline-block;
                          width: 100px;
                          font-weight: 800;
                          text-align: center;
                          margin-bottom: 5px;
                          margin-top: 80px;
                        "
                      >
                        卸车榜单
                      </span>
                    </div>
                  </div>
                </div>
              </Col>
            </Row>
          </div>
          <!--  -->
        </div>
        <span
          style="
            margin-top: 30px;
            margin-bottom: 50px;
            font-weight: 800;
            font-size: 16px;
          "
        >
        </span>
        <!-- 图片 -->
        <!-- 轨迹 -->
        <div
          v-show="orderInfo.orderState > '1' && orderInfo.orderState != '-1'"
        >
          <div class="trajectory">轨迹监控</div>
          <div>
            <div style="display: flex; justify-content: space-between">
              <div></div>
              <div>
                <span>
                  <Button
                    :loading="refreshLoading"
                    @click="refreshModal"
                    class="refreshButme"
                  >
                    <Icon type="md-refresh" />刷新
                  </Button>
                  <Button
                    :loading="alarmLoading"
                    style="margin-left: 10px"
                    class="refreshButme"
                    @click="getVehicleposition"
                    >定位</Button
                  >
                </span>
              </div>
            </div>
            <div style="margin-top: -18px" class="traject demo-spin-article">
              <Tabs @on-click="trackMonitoring" v-model="trajectoryMonitor">
                <TabPane label="车辆轨迹" name="vehicleMapName">
                  <div style="margin-bottom: 10px">
                    <span>
                      <span>当前车速：{{ carspd ? carspd : "0" }}km/h</span>
                      <span style="margin-left: 10px"
                        >行驶里程：{{ carmlg ? carmlg : "0" }}km</span
                      >
                    </span>
                    <div>当前位置：{{ caraddress }}</div>
                  </div>
                  <Row>
                    <Col span="16">
                      <div class="modal-box">
                        <div
                          style="width: 100%; height: 300px"
                          id="vehicleMap"
                          class="map"
                        ></div>
                      </div>
                    </Col>
                    <Col span="8">
                      <div class="MapShow" id="chatform">
                        <!-- <Scroll  :on-reach-bottom="handleReachBottom"  :distance-to-edge="[-100,-100]" height=600>  -->
                        <div
                          class="person"
                          ref="personDom"
                          @scroll="handleScroll($event)"
                        >
                          <Timeline>
                            <div v-if="this.VehiTlerajectory.length > 0">
                              <TimelineItem
                                v-for="(activity, index) in VehiTlerajectory"
                                :key="index"
                              >
                                <span>
                                  <span
                                    :class="index == indexcss ? 'hover' : ''"
                                    >{{ activity.resul.gtm }}</span
                                  >
                                  <span
                                    :class="index == indexcss ? 'hover' : ''"
                                    style="margin-left: 5px"
                                  >
                                    {{ activity.resul.mlg }}km
                                  </span>
                                </span>
                                <p
                                  @click="handleChangeVideo(activity, index)"
                                  :class="index == indexcss ? 'hover' : ''"
                                  style="cursor: pointer"
                                >
                                  {{ activity.formatted_address }}
                                </p>
                              </TimelineItem>
                            </div>
                            <div v-else>暂无数据</div>
                          </Timeline>
                          <p
                            v-if="TouchThe"
                            class="content"
                            style="cursor: pointer; margin-left: 110px"
                          >
                            没有数据了,触底了~~~
                          </p>
                        </div>
                        <!-- </Scroll> -->
                      </div>
                    </Col>
                  </Row>
                </TabPane>
                <TabPane label="手机轨迹" name="mobileMapName">
                  <div style="margin-bottom: 10px"></div>
                  <Row>
                    <Col span="16">
                      <div class="modal-box">
                        <div
                          style="width: 100%; height: 300px"
                          id="mobileMap"
                          class="map"
                        ></div>
                      </div>
                    </Col>
                    <Col span="8">
                      <div class="mobilMapShowh" id="mobilechatform">
                        <div
                          class="mobileperson"
                          ref="mobilepersonDom"
                          @scroll="mobilehandleScroll($event)"
                        >
                          <Timeline>
                            <div v-if="this.mobilePhoneTrack.length > 0">
                              <TimelineItem
                                v-for="(cade, indexs) in mobilePhoneTrack"
                                :key="indexs"
                              >
                                <div
                                  style="cursor: pointer"
                                  @click="clicmobilel(indexs)"
                                  :class="indexs == cmobileindex ? '' : ''"
                                >
                                  <div>
                                    <span>
                                      {{
                                        cade.resuls.orderState == "1"
                                          ? "已接单"
                                          : cade.resuls.orderState == "2"
                                          ? "已装货"
                                          : cade.resuls.orderState == "3"
                                          ? "运输中"
                                          : cade.resuls.orderState == "4"
                                          ? "已卸货"
                                          : "已取消"
                                      }}
                                    </span>
                                    <!-- 原因 -->
                                    <span
                                      v-if="
                                        cade.resuls.journal == '' &&
                                        cade.resuls.journal == null
                                      "
                                    ></span>
                                    <span v-else>
                                      <span
                                        v-if="cade.resuls.journal == '发送成功'"
                                        style="color: #19be6b"
                                      >
                                        {{ cade.resuls.journal }}
                                      </span>
                                      <span v-else style="color: red">
                                        {{ cade.resuls.journal }}
                                      </span>
                                    </span>
                                  </div>
                                  <p>{{ cade.resuls.createTime }}</p>
                                  <div>
                                    <span>
                                      {{ cade.resuls.driverName }}
                                      {{ cade.resuls.vehicleNum }}
                                    </span>
                                  </div>
                                  <div>
                                    <span>
                                      {{ cade.formatted_address }}
                                    </span>
                                  </div>
                                </div>
                              </TimelineItem>
                            </div>
                            <div v-else>暂无数据</div>
                          </Timeline>
                          <p
                            v-if="mobilTouchThe"
                            class="content"
                            style="cursor: pointer; margin-left: 110px"
                          >
                            没有数据了,触底了~~~~
                          </p>
                        </div>
                      </div>
                    </Col>
                  </Row>
                </TabPane>
              </Tabs>
              <Spin size="large" fix v-if="spinShow"></Spin>
            </div>
          </div>
        </div>
      </div>
      <!-- 报警详情 -->
      <Drawer :title="choutiText" width="1200" v-model="alarmDetailsDrawer">
        <Table
          :loading="loading"
          :columns="mingxititle"
          :data="mingxidata"
          ref="table"
        ></Table>
      </Drawer>
      <!--  -->
      <!-- 自定义导出数据 -->
      <Modal
        v-model="exportModalVisible"
        :title="exportTitle"
        :loading="loadingExport"
        @on-ok="exportCustomData"
      >
        <Form ref="exportForm" :label-width="100">
          <FormItem label="导出文件名">
            <Input v-model="filename" />
          </FormItem>
          <FormItem label="自定义导出列">
            <CheckboxGroup v-model="chooseColumns">
              <Checkbox
                v-for="(item, i) in exportColumns"
                :label="item.title"
                :key="i"
                :value="item.checked"
                :disabled="item.disabled"
              ></Checkbox>
            </CheckboxGroup>
            <FormItem label="备注">
              <Input
                v-model="exportRemarks"
                placeholder="备注"
                style="width: 300px"
              />
            </FormItem>
          </FormItem>
        </Form>
      </Modal>
      <!-- 投保弹框 -->
      <Modal v-model="modallInsureScarry" title="货运投保">
        <div>
          <div>
            <span> 保单编号 </span>
            <span style="margin-left: 4px">
              <InputNumber
                style="width: 300px"
                v-model="policyNoCode"
                placeholder="请输入保单编号"
              ></InputNumber>
            </span>
          </div>
          <div class="lInsuoad">
            <div></div>
            <span class="lInsugScarry"> 保单单据</span>
            <span>
              <div class="upledDaiss">
                <div
                  class="demo-upload-list-waybill"
                  v-show="policPyicture.url"
                >
                  <template>
                    <div>
                      <img :src="policPyicture.url" alt="" />
                    </div>
                    <div class="demo-upload-list-waybill-cover">
                      <Icon
                        type="ios-eye-outline"
                        @click.native="handleView(policPyicture.url)"
                      ></Icon>
                      <Icon
                        type="ios-trash-outline"
                        @click.native="handleRemove(policPyicture)"
                      ></Icon>
                    </div>
                  </template>
                </div>
                <Upload
                  :disabled="false"
                  ref="upload"
                  :show-upload-list="false"
                  :default-file-list="defaultList"
                  :on-success="handleSuccess"
                  :format="['jpg', 'jpeg', 'png']"
                  :max-size="20480"
                  :on-format-error="handleFormatError"
                  :on-exceeded-size="handleMaxSize"
                  :before-upload="handleBeforeUpload"
                  :headers="header"
                  type="drag"
                  action="#"
                  style="display: inline-block; width: 58px"
                >
                  <div style="width: 58px; height: 58px; line-height: 58px">
                    <Icon type="ios-camera" size="20"></Icon>
                  </div>
                </Upload>
                <Modal title="" v-model="visible">
                  <!-- <img :src="imgName" v-if="visible" style="width: 100%" /> -->
                </Modal>
                <div slot="footer"></div>
              </div>
            </span>
          </div>
        </div>
        <div slot="footer">
          <Button type="primary" :loading="submitComp" @click="insureDetermin"
            >确定</Button
          >
        </div>
      </Modal>
      <!-- 轨迹 -->
    </Card>
    <!-- 按钮 -->
    <div class="Cardokbtn">
      <div class="okbtn">
        <div style="margin-left: 40px">
          <div style="display: flex; justify-content: space-between">
            <div>
              <!-- -1 '已取消'  0待接单' 1待装货' 2运输中' 3待审核' 4已签收' 5已完成' -->

              <!-- v-if="orderInfo.orderState == 4 && this.$route.query.pageType == 5"  -->
              <span
                v-if="
                  orderInfo.orderState == 3 && this.$route.query.pageType == 5
                "
              >
                <Button type="primary" @click="tranOrder">订正吨位</Button>
                &nbsp;
              </span>
              &nbsp;
              <span
                v-if="orderInfo.orderState >= 0 && orderInfo.orderState < 3"
              >
                <Button type="error" @click="cancle">取消运单</Button>
                &nbsp;</span
              >
              <Button @click="waybillDocumentary">处理日志</Button>
              <span>
                <span
                  v-if="
                    (orderInfo.orderState == '1' &&
                      orderInfo.addressFence == '0') ||
                    (orderInfo.orderState == '2' &&
                      orderInfo.addressFence == '0')
                  "
                >
                  &nbsp;
                  <Button
                    type="primary"
                    :loading="loadingopenFence"
                    @click="openFence"
                    >开启围栏</Button
                  >
                </span>

                <span
                  v-if="
                    (orderInfo.orderState == '1' &&
                      orderInfo.addressFence != '0') ||
                    (orderInfo.orderState == '2' &&
                      orderInfo.addressFence != '0')
                  "
                >
                  &nbsp;
                  <Button
                    type="error"
                    :loading="loadingopencloseFence"
                    @click="closeFence"
                    >关闭围栏</Button
                  >
                </span>
              </span>
              <span
                v-if="
                  orderInfo.orderState == 4 && this.$route.query.pageType == 5
                "
              >
                &nbsp;
                <Button
                  type="primary"
                  :loading="loadingReturne"
                  @click="returnModification"
                  >退回修改</Button
                >
              </span>
            </div>

            <div style="margin-right: 40px; display: flex">
              <div>
                <span
                  v-if="
                    (orderInfo.orderState == 3 &&
                      this.$route.query.pageType == 5) ||
                    (orderInfo.orderState == 4 &&
                      this.$route.query.pageType == 5)
                  "
                >
                  <Button type="warning" @click="onNext">
                    {{ this.orderInfo.orderState | ORDER_STATE }}
                  </Button>
                </span>
              </div>
              &nbsp; &nbsp;
            </div>
            <div
              v-if="orderInfo.orderState == -1"
              style="padding-bottom: 10px; padding-right: 30px"
            >
              <span>取消原因：</span>
              <span class="cancellation">{{ orderInfo.orderStateDesc }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--添加处理日志  -->
    <Modal
      v-model="documentaryRecordModal"
      title="处理日志"
      width="600"
      :styles="{ top: '100px' }"
    >
      <div>
        <div>
          <div class="comment-container">
            <div class="ontain">
              <div v-if="waybillRecordList.length < 1">暂无数据</div>
              <div
                class="listItem"
                v-for="(item, index) in waybillRecordList"
                :key="`tousu${index}`"
              >
                <div style="display: flex; word-break: break-all">
                  <div
                    style="width: inherit; display: block; white-space: normal"
                  >
                    [{{ item.name }}] [{{ item.createTime }}] {{ item.content }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="Signcss">
          <div style="display: flex; margin-top: 15px">
            <div class="contentInput">
              <Input
                type="textarea"
                style="width: 400px"
                v-model="documentaryRecord"
                placeholder="请输入处理日志"
                rows="2.4"
                :autosize="{ minRows: 2.4, maxRows: 5 }"
              >
              </Input>
            </div>
            <!--  -->
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button
          type="primary"
          :loading="documentarybtn"
          @click="documentaryPreservation"
          >保存</Button
        >
      </div>
    </Modal>
    <div class="tranModalCss">
      <Modal
        width="1500"
        v-model="tranModal"
        :title="revisedTitle"
        @on-cancel="cancel"
        :styles="{ top: '20px' }"
      >
        <div style="display: flex">
          <div class="modifyTonnage">
            <Table :columns="tranColumns" :data="tableData2"></Table>
          </div>
          <div class="modifyTonnage">
            <Table :columns="realColumns" :data="tableData2"></Table>
          </div>
        </div>
        <div>
          <viewer :images="preImgList" :options="options">
            <div style="display: flex">
              <div v-for="(src, index) in preImgList" :key="index">
                <div :class="index == 1 ? 'mal1' : 'mal'">
                  <div class="viewer-img-title">{{ src.tiem }}</div>
                  <div class="imgpod">
                    <img
                      :src="src.img"
                      :id="index + 'hengben'"
                      class="imgboxele"
                    />
                    <span @click="xuanzhuan(index + 'hengben')">
                      <i class="el-icon-refresh-right frueshe-css"></i>//旋转
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div
              ref="nodata"
              style="text-align: center; margin-top: 100px"
              v-if="!preImgList.length"
            >
              暂无数据
            </div>
          </viewer>
        </div>
        <div slot="footer">
          <Button :loading="tranLoading" @click="modifyTranClick" type="primary"
            >保存</Button
          >
        </div>
      </Modal>
    </div>
    <!--  -->
    <Modal width="60%" v-model="changeAddress" :title="changeAddresstitle">
      <div style="margin: 0 0 20px 0">
        <DatePicker
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          placement="bottom-end"
          v-model="changeDate"
          placeholder="请选择时间"
          style="width: 200px"
          @on-change="timeschange"
        ></DatePicker>
      </div>
      <div class="modal-box">
        <div style="height: 300px" id="containerAddress" class="map">
          <div id="pickerBoxadd">
            <input
              id="pickerInputthree"
              placeholder="输入关键字选取地点"
              autocomplete="off"
            />
            <div id="poiInfo"></div>
          </div>
        </div>

        <div id="right">
          <div style="display: none">
            <div>
              <div class="title">选择模式</div>
              <Input type="radio" name="mode" value="dragMap" checked
                >拖拽地图模式</Input
              >
              <br />
              <Input type="radio" name="mode" value="dragMarker"
                >拖拽Marker模式</Input
              >
            </div>
            <div>
              <button id="start">开始选点</button>
              <button id="stop">关闭选点</button>
            </div>
          </div>
          <div style="margin: 20px 0 0 0">
            <div class="title">选址结果</div>
            <div class="c">
              经纬度：
              <span id="lnglatAddress"></span>
            </div>
            <div class="c">
              地址：
              <span id="addressadd"></span>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button @click="changedetail" :loading="detaiLoading" type="primary"
          >确定</Button
        >
      </div>
    </Modal>
    <Modal v-model="cancleOrderModel" title="取消运单">
      <Form :label-width="80">
        <FormItem label="取消原因">
          <Input
            type="text"
            v-model="cancleOrderDesc"
            placeholder="请输入取消原因"
          />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button
          @click="cancleOrderClick"
          :loading="cancleLoading"
          type="primary"
          >确定</Button
        >
        <!-- <Button @click="cancelMap" style="margin-left: 8px">取消</Button> -->
      </div>
    </Modal>
    <Modal
      width="800"
      v-model="curMapAddress"
      title="车辆当前位置"
      @on-cancel="cancel"
    >
      <div style="margin-bottom: 10px">
        <div>定位车辆：{{ carVehicle }}</div>
        <div>当前车速：{{ carspd }}km/h</div>
        <div>定位时间：{{ carTime }}</div>
        <div>当前位置：{{ caraddress }}</div>
      </div>
      <div class="modal-box">
        <div style="width: 100%; height: 400px" id="themap" class="map"></div>
      </div>
      <div slot="footer">
        <!-- <Button @click="ok" type="primary">保存</Button> -->
        <Button @click="curMapAddress = false" style="margin-left: 8px"
          >取消</Button
        >
      </div>
    </Modal>
    <!-- 货主详情 -->
    <OwnerDetails
      @OwnerDetaiEnd="OwnerDetaiEnd"
      :OwnerDetailsId="OwnerDetailsId"
      :OwnerDetailsModalue="this.OwnerDetailsModalue"
    >
    </OwnerDetails>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>

<script>
import {
  changeOrderState,
  uploadOrderInfo,
  getTracks,
  saveOrderExtend,
  updateOrderExtend,
  updateAddressFence, // 改变运单地址围栏状态
} from "@/api/order";
import { getMobileTrack } from "@/api/ownerEnd/waybillAdmin";
import {
  uploadOrderPicId,
  Gaudemap,
  uploadComplaintPicId,
  uploadInsurePicId,
  getDocumentaryListOrder,
  orderaddDocumentary,
} from "@/api/index";
import {
  vehicleposition, //车辆位置
} from "@/api/monitoring";
import { alarmInformationList } from "@/api/monitoring";
import { getStore, setStore } from "@/libs/storage";
import beginImg from "@/assets/begin_icon.png";
import endImg from "@/assets/end_icon.png";
import Map_location from "@/assets/Map_location.png";
import * as imageConversion from "image-conversion";
import axios from "axios";
import { getOrderVoInfo } from "@/api/ownerEnd/waybillAdmin"; //运单详情接口
// 根据你的实际请求api.js位置路径修改
import {
  userInfoVo, //承运人信息
} from "@/api/ownerEnd/waybillAdmin";
import GPS from "@/libs/GPS";
import OwnerDetails from "@/views/componentsonn_source_goods/OwnerDetails";
import defaultAvatar from "@/assets/customer.png";
import { el } from "date-fns/locale";
export default {
  data() {
    return {
      spinShow: false,
      curMapAddress: false, //车辆弹框
      mapVehic: null,
      marker: null,
      caraddress: "",
      carspd: "",
      carVehicle: "",
      carTime: "",
      mobilePhoneTrack: [],
      defaultAvatar: defaultAvatar, //默认头像
      // 订正结算价
      settlementTitle: "调整货主结算价",
      formRevised: {
        platformUnitPrice: "",
        platformTotalPrice: "",
        driverUnitPrice: "",
        driverTotalPrice: "",

        estimateAmt: "",
        damageCargo: "",
        sfreightFee: "",
        rfreightFee: "",
        amount: "",
        driverDamageCargo: "",
        driverRfreightFee: "",
        driverSfreightFee: "",
        driverAmount: "",

        transGoodWeight: "",
        realGoodWeight: "",

        refreshLoading: false,
        alarmLoading: false,
      },
      ruleRevised: {
        driverUnitPrice: [
          {
            type: "number",
            required: true,
            message: "输入运费单价",
            trigger: "blur",
          },
        ],

        estimateAmt: [
          {
            type: "number",
            required: true,
            message: "输入运费总价",
            trigger: "blur",
          },
        ],
        platformUnitPrice: [
          {
            type: "number",
            required: true,
            message: "输入运费单价",
            trigger: "blur",
          },
        ],
        damageCargo: [
          {
            type: "number",
            required: true,
            message: "输入货损费用",
            trigger: "blur",
          },
        ],
        sfreightFee: [
          {
            type: "number",
            required: true,
            message: "输入实结运费",
            trigger: "blur",
          },
        ],
        sfreightFee: [
          {
            type: "number",
            required: true,
            message: "输入应结运费",
            trigger: "blur",
          },
        ],
        amount: [
          {
            type: "number",
            required: true,
            message: "输入结算金额",
            trigger: "blur",
          },
        ],
        transGoodWeight: [
          {
            type: "number",
            required: true,
            message: "输入装载吨数",
            trigger: "blur",
          },
        ],
        realGoodWeight: [
          {
            type: "number",
            required: true,
            message: "输入签收吨数",
            trigger: "blur",
          },
        ],
      },
      boxHeight: 0,
      boxScrollHeight: 0,
      boxScrollTop: 0,
      boxWindowHeitht: 0,
      companySettlement: {},
      driverSettlement: {},
      longbutL: false,
      mobilTouchThe: false,
      // 警报详细
      alarmDetailsDrawer: false,
      choutiText: "报警预警明细",
      mingxititle: [
        {
          title: "时间",
          minWidth: 180,
          sortable: false,
          key: "sendTime",
        },
        {
          title: "类型",
          sortable: false,
          minWidth: 200,
          key: "earlyWarningType",
        },
        { title: "说明", sortable: false, minWidth: 390, key: "msg" },
        { title: "位置", sortable: false, minWidth: 390, key: "addr" },
      ],
      exportData: [],
      exportModalVisible: false, // 自定义导出显示
      exportTitle: "确认导出",
      filename: "报警预警明细",
      loadingExport: true, // 导出加载状态\
      chooseColumns: [],
      exportarr: [],
      mingxidata: [],
      currentTime: "", //当前时间
      Time1: "", //格式化后的时间
      Time2: "",
      Time3: "",
      Time4: "",
      carryGoodWeight: 0, //最大承重量
      trajectoryMonitor: "vehicleMapName", //轨迹监控切换
      mobileMaplist: [], //手机轨迹数据
      policPyicture: {}, //投保图片文件夹
      policyNoCode: "", //保单编号
      modallInsureScarry: false, //投保弹框
      uploadConsultingId: uploadComplaintPicId,
      insureImg: "", // 投保图片

      OwnerDetailsId: "", //货主Id
      OwnerDetailsModalue: false, //货主详情弹框

      waybillAvatar: "", //托运人头像
      carrierAvatar: "", //承运人头像
      driverHead: "", //驾驶员头像
      driverName: "", // 驾驶员名称
      driverMobile: "", // 驾驶员电话
      modifyLoading: false,
      settlementLoading: false,
      tranLoading: false,
      indexcss: null,
      TouchThe: false,
      vehiclemap: "",
      mobilemap: "",
      VehiTlerajectory: [],
      mobileTlerajectory: [],

      subRemarks: "", //备注
      load: 0, // 动态显示进度条
      LoadingBilltrue: false, // 关闭进度条
      UnloadingListtrue: false, // 关闭进度条
      GroupPhototrue: false, // 关闭进度条
      GroupGoodstrue: false, // 关闭进度条
      cancleOrderModel: false,
      cancleOrderDesc: "",
      addtype: 1, //判断装卸货
      changeTimes: "", //选择装卸货日期
      changeAddress: false, //弹框
      changeAddresstitle: "", //文字标题
      jingdu: "", //经度
      weidu: "", //纬度
      changeParams: {},
      yNewNumber: "",
      qNewNumber: "",
      caraddress: "",
      carspd: "",
      carmlg: "",
      Map_location: Map_location,
      beginImg: beginImg,
      endImg: endImg,
      uploadOrderPicId: uploadOrderPicId,
      current: 0,
      userId: "",
      orderId: this.$route.query.id,
      orderInfo: {
        companyInfoVo: { companyName: "" },
        driverInfoVo: { nickName: "" },
        vehicleInfoVo: { vehicleNum: "" },
        platformInfoVo: {},
      },
      tranModal: false,
      realModal: false,
      showRevised: "",
      settlementUnitPrice: "",
      settlementWeight: "",
      modal1: false,
      receiptOrderPicUrl: "",
      deliveryOrderPicUrl: "",
      manCarOrderPicUrl: "",
      manGoodsOrderPicUrl: "",
      tableData: [],
      height: "400px",
      go: "",
      html: "",
      header: {
        accessToken: getStore("accessToken"),
      },
      accessToken: getStore("accessToken"),
      url: "https://www.baidu.com/",
      scrollFun: false,
      settleDetailsData: [
        {
          sfreightFee: 0,
          damageCargo: 0,
          rfreightFee: 0,
          amount: 0,
        },
      ],
      tableData1: [],
      tranColumns: [
        {
          title: "装载吨数（吨）",
          key: "transGoodWeight",
          render: (h, params) => {
            params.row.transGoodWeight = this.yNewNumber;
            return h("div", [
              h("Input", {
                props: {
                  value: params.row.transGoodWeight,
                },
                on: {
                  "on-blur": (event) => {
                    this.yNewNumber = event.target.value;
                  },
                },
              }),
            ]);
          },
        },
      ],
      tranColumns: [
        {
          title: "装载吨数（吨）",
          key: "transGoodWeight",
          render: (h, params) => {
            params.row.transGoodWeight = this.yNewNumber;
            return h("div", [
              h("Input", {
                props: {
                  value: params.row.transGoodWeight,
                },
                on: {
                  "on-blur": (event) => {
                    this.yNewNumber = event.target.value;
                  },
                },
              }),
            ]);
          },
        },
      ],
      realColumns: [
        {
          title: "签收吨数（吨）",
          key: "realGoodWeight",
          render: (h, params) => {
            params.row.realGoodWeight = this.qNewNumber;
            return h("div", [
              h("Input", {
                props: {
                  value: params.row.realGoodWeight,
                },
                on: {
                  "on-blur": (event) => {
                    this.qNewNumber = event.target.value;
                  },
                },
              }),
            ]);
          },
        },
      ],
      settlementData: [{}],
      tableData2: [{}],
      tableData3: [],

      marker: null,
      polyline: null,
      num: 0,
      newnum: 20,
      DrivingTrack: [],
      InfiniteScroll: 1,
      arriveCoor: [],
      markers: [],

      mobileNum: 0,
      mobileNewnum: 20,
      mobileInfiniteScroll: 1,
      ////////////////////////////////////////////////////
      // 投诉
      submitComp: false,
      huifuContent: "",
      fileall: "",
      uploadList: [],
      visible: false,
      showDetail: false,
      AbnormalFron: {
        name: "",
        phone: "",
        problemType: "",
        problemValue: "",
        orderNo: "",
        orderId: "",
        driverMobile: "",
        driverName: "",
      },
      AbnormalFronrule: {
        orderNo: [
          {
            required: true,
            message: "请填写订单编号",
            trigger: "blur",
          },
        ],
        problemType: [
          {
            required: true,
            message: "请选择问题分类",
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入用户名称",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
      },
      ////////////////// 评价运单
      evaluateModal: false,

      transportEfficiency: "", //运输效率
      transportEfficiencyText: "",

      transportationSafety: "", //运输安全
      transportationSafetyText: "",

      serviceQuality: "", //服务质量
      serviceQualityText: "",

      customerSatisfaction: "", //满意程度
      customerSatisfactionText: "",

      viewCommentsData: {},
      refreshModalNme: 2,
      cmobileindex: null,
      markers: [],
      // 订正吨位
      preImgList: [],
      yNewNumber: "",
      qNewNumber: "",
      //
      documentaryRecordModal: false, //日志弹框
      documentaryRecord: "", //新增处理日志
      documentarybtn: false, //日志加载
      waybillRecordList: [], //处理日志
      flot: false,
      ruleFormNum: 1,
      jurisdiction: "",
      xuanzhuanNumCar: 0,
      loadingopenFence: false, //开启围栏
      loadingopencloseFence: false, //关闭围栏
    };
  },
  components: {
    OwnerDetails,
  },
  mounted() {
    this.getOrderDetail();
    this.getMap();
    this.userId = JSON.parse(getStore("userInfo")).id;
    this.$refs.personDom.addEventListener("scroll", this.handleScroll, true);
    this.$refs.mobilepersonDom.addEventListener(
      "scroll",
      this.mobilehandleScroll,
      true
    );
    this.InitiatLaint = JSON.parse(
      window.localStorage.getItem("complaint_type")
    );
  },
  methods: {
    // 旋转
    xuanzhuan(elename) {
      this.xuanzhuanNumCar = this.xuanzhuanNumCar + 1;
      var box = document.getElementById(elename);
      box.style.transform = "rotateZ(" + 90 * this.xuanzhuanNumCar + "deg)";
    },
    getVehicleposition(vehicleNum) {
      this.spinShow = true;
      let obj = { vehicleId: this.orderInfo.vehicleId };
      vehicleposition(obj).then((res) => {
        this.spinShow = false;
        if (res.code == 200) {
          res.result.records[0].mark = GPS.gcj_encrypt(
            Number(res.result.records[0].callat),
            Number(res.result.records[0].callon)
          );
          this.carVehicle = this.orderInfo.vehicleNum; //车牌
          axios
            .get(
              "https://restapi.amap.com/v3/geocode/regeo?location=" +
                [
                  res.result.records[0].mark.lon,
                  res.result.records[0].mark.lat,
                ] +
                "&key=" +
                Gaudemap +
                "&batch=" +
                true +
                " "
            )
            .then((res) => {
              this.caraddress = res.regeocodes[0].formatted_address;
            });
          this.carspd = res.result.records[0].speed; //车速
          this.carTime = this.conversionTime(res.result.records[0].devicetime); //时间
          this.curMapAddress = true;
          let val = [];
          val.push(res.result.records[0].mark.lat);
          val.push(res.result.records[0].mark.lon);
          this.mapShow(val);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    conversionTime(val) {
      if (val > 100000) {
        var now = new Date(val),
          y = now.getFullYear(),
          m = now.getMonth() + 1,
          d = now.getDate(),
          x =
            y +
            "-" +
            (m < 10 ? "0" + m : m) +
            "-" +
            (d < 10 ? "0" + d : d) +
            " " +
            now.toTimeString().substr(0, 8);
        return x;
      } else {
        return 0;
      }
    },
    mapShow(val) {
      let startx = val[1];
      let starty = val[0];
      var map = new AMap.Map("themap", {
        resizeEnable: true,
        // center: val[0],
        center: [val[1], val[0]],
        zoom: 13,
      });
      var begin = new AMap.Marker({
        position: new AMap.LngLat(startx, starty), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: "https://webapi.amap.com/images/car.png",
      });
      map.add(begin);
      // this.marker.setMap(map);
    },
    // 手机轨迹添加颜色
    clicmobilel(index) {
      this.cmobileindex = index;
    },
    // 报警详情
    alarmDetailsClick() {
      this.alarmLoading = true;
      alarmInformationList({ orderId: this.$route.query.id }).then((res) => {
        this.alarmLoading = false;
        if (res.code == 200) {
          this.choutiText =
            this.orderInfo.vehicleInfoVo.vehicleNum + " 报警预警明细";
          this.mingxidata = res.result;
          this.mingxidata.forEach((item) => {
            item.earlyWarningType =
              item.oneType + "/" + item.twoType + "/" + item.threeType;
          });
          this.exportarr = res.result;
          this.alarmDetailsDrawer = true;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 投保
    waybillInsureScarry(num) {
      if (num == 2) {
        let url =
          this.$baseUrl +
          "/freight/file/view/" +
          this.orderInfo.insurePhoto +
          "?accessToken=" +
          this.accessToken +
          "&preview=true";
        let image = new Image();
        image.src = url;
        let viewer = new Viewer(image, {
          hidden: function () {
            viewer.destroy();
          },
        });
        viewer.show();
      } else {
        this.policPyicture.url = "";
        this.modallInsureScarry = true;
      }
    },
    //
    insureDetermin() {
      if (this.policyNoCode == "") {
        return this.$Message.warning("请输入保单编号");
      }
      if (this.policPyicture.url == "") {
        return this.$Message.warning("请上传保单单据");
      }
      this.submitComp = true;
      let param = new FormData(); // 创建form对象
      param.append("file", this.policPyicture);
      param.append("orderId", this.orderInfo.id);
      param.append("insureNumber", this.policyNoCode);
      uploadInsurePicId(param).then((res) => {
        this.submitComp = false;
        if (res.code == 200) {
          this.modallInsureScarry = false;
          this.$Message.success("投保成功");
          this.getOrderDetail();
        } else {
          return this.$Message.error(res.message);
        }
      });
    },
    // 点击查看回复图片
    handleView(url) {
      let image = new Image();
      image.src = url;
      let viewer = new Viewer(image, {
        hidden: function () {
          viewer.destroy();
        },
      });
      viewer.show();
    },
    // 删除图片
    handleRemove(file) {
      this.policPyicture = {};
    },
    // 成功
    handleSuccess(res, file, fileList) {
      if (res.result != null) {
        var a = res.result;
        this.enlargeImig =
          this.$baseUrl +
          "/freight/file/view/" +
          a +
          "?accessToken=" +
          this.accessToken +
          "&preview=true";
      }
    },
    // 文件格式验证失败时的钩子
    handleFormatError(file) {
      this.$Message.error("图片格式错误,指定上传图片格式 jpg、jpeg、png");
    },
    // 文件超出指定大小限制时的钩子
    handleMaxSize(file) {
      this.$Message.error("图片超出了最大存储限制");
    },
    //压缩图片
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
        imageConversion.compressAccurately(file, 100).then((res) => {
          res = new File([res], file.name, {
            type: res.type,
            lastModified: Date.now(),
          });
          resolve(res);
        });
      });
    },
    // 上传文件之前的钩子，参数为上传的文件
    handleBeforeUpload(file) {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const _base64 = reader.result;
        file.url = _base64;
        this.policPyicture = file;
      };
      this.fileall = file;
      return false;
    },
    // 是否投保
    policyNo() {
      this.insureImg =
        this.$baseUrl +
        "/freight/file/view/" +
        this.orderInfo.insurePhoto +
        "?accessToken=" +
        this.accessToken +
        "&preview=true";
    },
    //货主详细信息
    LookCargoOwnerInfo(row) {
      this.OwnerDetailsId = this.orderInfo.companyUserId;
      this.OwnerDetailsModalue = true;
    },
    // 货主详细信息关闭
    OwnerDetaiEnd(val) {
      this.OwnerDetailsModalue = val;
      this.OwnerDetailsId = "";
    },

    handleScroll() {
      this.boxScrollTop = this.$refs.personDom.scrollTop; //滑入屏幕上方的高度
      this.boxWindowHeitht = this.$refs.personDom.clientHeight; //能看到的页面的高度
      this.boxScrollHeight = this.$refs.personDom.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
      this.boxHeight = this.boxScrollTop + this.boxWindowHeitht;
      this.refreshModalNme = 2;
      if (Math.round(this.boxHeight - 20) == this.boxScrollHeight - 20) {
        if (!this.scrollFun) {
          this.scrollFun = true;
          if (this.InfiniteScroll == 2) {
            this.TouchThe = true;
            return false;
          } else {
            this.TouchThe = false;
            this.InverseGeocoding(this.num + 20, this.newnum + 20);
          }
        }
      }
    },

    // 点击了时间线
    handleChangeVideo(val, index) {
      this.indexcss = index;
      let xy = [];
      xy.push(val.resul.lon);
      xy.push(val.resul.lat);
      this.vehiclemap.remove(this.markers);
      this.markers = [];
      this.arriveCoor = [];
      this.arriveCoor.push(xy);
      for (let index = 0; index < this.arriveCoor.length; index++) {
        var marker = new AMap.Marker({
          icon: new AMap.Icon({
            image: Map_location,
            // size: new AMap.Size(20, 20), //图标大小
            imageSize: new AMap.Size(32, 32),
          }),
          position: this.arriveCoor[index],
          offset: new AMap.Pixel(-13, -30),
          // 设置是否可以拖拽
          draggable: true,
          cursor: "move",
          // 设置拖拽效果
          raiseOnDrag: true,
          // zoomToAccuracy: true,
        });
        this.markers.push(marker);
        this.vehiclemap.add(marker);
      }
    },
    //选择时间
    timeschange(val) {
      this.changeTimes = val;
    },
    //压缩图片
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
        imageConversion.compressAccurately(file, 100).then((res) => {
          res = new File([res], file.name, {
            type: res.type,
            lastModified: Date.now(),
          });
          resolve(res);
        });
      });
    },
    getMap() {
      let that = this;
      var map = new AMap.Map("containerAddress", {
        zoom: 6,
      });

      AMapUI.loadUI(
        ["misc/PoiPicker", "misc/PositionPicker"],
        function (PoiPicker, PositionPicker) {
          var poiPicker = new PoiPicker({
            //city:'北京',
            input: "pickerInputthree",
          });
          var positionPicker = new PositionPicker({
            mode: "dragMap",
            map: map,
          });
          positionPicker.on("success", function (positionResult) {
            document.getElementById("lnglatAddress").innerHTML =
              positionResult.position;
            document.getElementById("addressadd").innerHTML =
              positionResult.address;
            that.weidu = positionResult.position.lat;
            that.jingdu = positionResult.position.lng;
          });
          positionPicker.on("fail", function (positionResult) {});
          var onModeChange = function (e) {
            positionPicker.setMode(e.target.value);
          };
          var startButton = document.getElementById("start");
          var stopButton = document.getElementById("stop");
          var dragMapMode = document.getElementsByName("mode")[0];
          var dragMarkerMode = document.getElementsByName("mode")[1];
          startButton.addEventListener("click", function () {
            positionPicker.start(map.getBounds().getSouthWest());
          });
          stopButton.addEventListener("click", function () {
            positionPicker.stop();
          });
          dragMapMode.addEventListener("change", onModeChange);
          dragMarkerMode.addEventListener("change", onModeChange);
          positionPicker.start();
          map.panBy(0, 1);
          map.addControl(
            new AMap.ToolBar({
              liteStyle: true,
            })
          );
          //初始化poiPicker
          poiPickerReady(poiPicker);
        }
      );
      function poiPickerReady(poiPicker) {
        window.poiPicker = poiPicker;
        var marker = new AMap.Marker();
        var infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -20),
        });
        //选取了某个POI
        poiPicker.on("poiPicked", function (poiResult) {
          var source = poiResult.source,
            poi = poiResult.item,
            info = {
              source: source,
              id: poi.id,
              name: poi.name,
              location: poi.location.toString(),
              address: poi.address,
            };
          marker.setMap(map);
          infoWindow.setMap(map);
          marker.setPosition(poi.location);
          infoWindow.setPosition(poi.location);
          document.getElementById("lnglatAddress").innerHTML = info.location;
          document.getElementById("addressadd").innerHTML = info.name;
          document.getElementById("pickerInputthree").value = info.name;
          that.weidu = poi.location.lat;
          that.jingdu = poi.location.lng;
          map.setCenter(marker.getPosition());
        });
        poiPicker.onCityReady(function () {
          // poiPicker.suggest('美食');
        });
      }
      this.caraddress = "暂无车辆轨迹";
    },
    goBack() {
      if (this.$route.query.pageType == 1) {
        //应结明细
        this.$router.push({
          name: "ownerManagement/finance-damin/shouldKnotDetailed",
          query: {
            key: this.$route.query.key,
            activeName: this.$route.query.activeName,
          },
        });
      } else if (this.$route.query.pageType == 4) {
        //承运运单
        this.$router.push({
          name: "ownerManagement/waybill-admin/waybillAdmin",
          query: {
            key: this.$route.query.key,
            carrierMatch: this.$route.query.carrierMatch,
          },
        });
      } else if (this.$route.query.pageType == 5) {
        //结算审核
        this.$router.push({
          name: "ownerManagement/finance-damin/shouldKnotDetailed",
          query: { key: this.$route.query.key },
        });
      } else if (this.$route.query.pageType == 9) {
        //开票明细的行程
        this.$router.push({
          name: "ownerInvoiceDetails",
          query: {
            key: this.$route.query.key,
            search: this.$route.query.search,
            id: this.$route.query.key,
            pageTypes: this.$route.query.pageTypes,
            pageType_orde: this.$route.query.pageType,
          },
        });
      } else if (this.$route.query.pageType == 10) {
        //-账单明细-操作明细
        this.$router.push({
          name: "transactionDetails",
          query: {
            key: this.$route.query.key,
            search: this.$route.query.search,
            id: this.$route.query.key,
            pageTypes: this.$route.query.pageType,
            goPayDetailsType: this.$route.query.goPayDetailsType,
            billMnagement: this.$route.query.billMnagement,
          },
        });
      } else if (this.$route.query.pageType == 11) {
        //投诉
        this.$router.push({
          name: "ownerManagement/personal-center/consultingComplaints",
          query: {
            consulaint: this.$route.query.consulaint,
            key: this.$route.query.key,
          },
        });
      } else if (this.$route.query.pageType == 12) {
        //投诉详情
        this.$router.push({
          name: "consultComplaintDetails",
          query: {
            consulaint: this.$route.query.consulaint,
            key: this.$route.query.key,
            data: this.$route.query.data,
            activities: this.$route.query.activities,
            seetest: this.$route.query.seetest,
          },
        });
      } else if (this.$route.query.pageType == 13) {
        //申请开票
        this.$router.push({
          name: "ownerManagement/invoice-admin/applyForInvoicing",
          query: {
            consulaint: this.$route.query.consulaint,
            key: this.$route.query.key,
            data: this.$route.query.data,
            activities: this.$route.query.activities,
            seetest: this.$route.query.seetest,
          },
        });
      } else if (this.$route.query.pageType == 14) {
        //运单监控
        this.$router.push({
          name: "ownerManagement/waybill-admin/waybillMonitor",
          query: { key: this.$route.query.key, page: this.$route.query.page },
        });
      } else if (this.$route.query.pageType == 21) {
        //完成支付
        this.$router.push({
          name: "ownerManagement/finance-damin/billDetailed",
          query: { key: this.$route.query.key, page: this.$route.query.page },
        });
      } else if (this.$route.query.pageType == 22) {
        //完成支付
        this.$router.push({
          name: "ownerManagement/finance-damin/flowVoucher",
          query: { key: this.$route.query.key, page: this.$route.query.page },
        });
      }
    },
    //装货磅单
    LoadingBill(event, file, fileList) {
      this.progressAll(event, 1);
    },
    //装货磅单
    UnloadingList(event, file, fileList) {
      this.progressAll(event, 2);
    },
    // 人车合照
    GroupPhoto(event, file, fileList) {
      this.progressAll(event, 3);
    },
    // 人货合照
    GroupGoods(event, file, fileList) {
      this.progressAll(event, 4);
    },
    //进度条
    progressAll(data, num) {
      if (num == 1) {
        this.LoadingBilltrue = true; // 显示进度条
      } else if (num == 2) {
        this.UnloadingListtrue = true; // 显示进度条
      } else if (num == 3) {
        this.GroupPhototrue = true;
      } else if (num == 4) {
        this.GroupGoodstrue = true;
      }
      var CardBack = setTimeout(() => {
        this.load = parseInt(data.percent); // 动态获取文件上传进度
      }, 500); // 一秒后关闭进度条
      setTimeout(() => {
        if (this.load >= 100) {
          this.load = 100;
          setTimeout(() => {
            if (num == 1) {
              this.LoadingBilltrue = false; // 显示进度条
            } else if (num == 2) {
              this.UnloadingListtrue = false; // 显示进度条
            } else if (num == 3) {
              this.GroupPhototrue = false;
            } else if (num == 4) {
              this.GroupGoodstrue = false;
            }
          }, 1000); // 一秒后关闭进度条
          clearTimeout(CardBack);
        }
      }, 501);
    },
    //装货合照
    deliveryHandleSuccess(res, file, fileList) {
      if (res.code == 500) {
        this.$Message.error(res.message);
        return;
      } else if (res.code == 200) {
        this.$Message.success("上传成功");
      }
      if (res.result != null) {
        this.orderInfo.deliveryOrderPicId = res.result;
        this.deliveryOrderPicUrl =
          this.$baseUrl + this.orderInfo.deliveryOrderPicId;
      }
    },

    //卸货合照
    receiptHandleSuccess(res, file, fileList) {
      if (res.code == 500) {
        this.$Message.error(res.message);
        return;
      } else if (res.code == 200) {
        this.$Message.success("上传成功");
      }
      if (res.result != null) {
        this.orderInfo.receiptOrderPicId = res.result;
        this.receiptOrderPicUrl =
          this.$baseUrl + this.orderInfo.receiptOrderPicId;
      }
    },

    cancle() {
      this.cancleOrderModel = true;
    },
    // 取消原因
    cancleOrderClick() {
      if (this.cancleOrderDesc == "" || this.cancleOrderDesc == undefined) {
        this.$Message.info("请输入取消原因");
        return;
      }
      this.cancleLoading = true;
      const params = {
        userId: JSON.parse(getStore("userInfo")).id,
        state: -1,
        desc: this.cancleOrderDesc,
        orderId: this.orderInfo.id,
      };
      this.cancleOrderModel = false;
      changeOrderState(params).then((res) => {
        this.cancleLoading = false;
        if (res.code == 200) {
          this.$Message.success("订单取消成功");
          this.getOrderDetail();
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 开启围栏
    openFence() {
      this.loadingopenFence = true;
      updateAddressFence({
        orderId: this.orderInfo.id,
        addressFence: "1",
      }).then((res) => {
        if (res.code == 200) {
          this.loadingopenFence = false;
          this.getOrderDetail();
          this.$Message.success("运单开启电子围栏");
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 关闭围栏
    closeFence() {
      this.loadingopencloseFence = true;
      updateAddressFence({
        orderId: this.orderInfo.id,
        addressFence: "0",
      }).then((res) => {
        if (res.code == 200) {
          this.getOrderDetail();
          this.loadingopencloseFence = false;
          this.$Message.success("运单关闭电子围栏");
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 处理日志列表
    // 日志
    waybillDocumentary() {
      this.documentaryRecordModal = true;
      this.documentaryList(this.orderInfo.id);
    },
    // 处理日志列表
    documentaryList(entrustedId) {
      getDocumentaryListOrder({
        orderId: entrustedId,
      }).then((res) => {
        if (res.code == 200) {
          this.waybillRecordList = res.result;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 处理日志
    documentaryPreservation() {
      if (this.documentaryRecord == "") {
        return this.$Message.warning("请输入处理日志");
      }
      this.documentarybtn = true;
      let datas = {
        operationId: this.orderInfo.id,
        content: this.documentaryRecord,
      };
      orderaddDocumentary(datas).then((res) => {
        this.documentarybtn = false;
        if (res.code == 200) {
          this.$Message.success("添加处理日志成功");
          this.documentaryRecord = "";
          this.documentaryList(this.orderInfo.id);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 退回修改
    returnModification() {
      this.$Modal.confirm({
        title: "退回修改",
        content: "确认该运单通过退回修改确认？",
        loading: true,
        onOk: () => {
          let orderId = this.$route.query.id;
          let data = {
            orderId: orderId,
            state: 3,
          };
          changeOrderState(data).then((res) => {
            this.$Modal.remove();
            if (res.code == 200) {
              this.$Message.success("退回修改通过");
              this.getOrderDetail();
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },
    // 很多状态的按钮
    onNext() {
      const params = {
        userId: JSON.parse(getStore("userInfo")).id,
        state: this.orderInfo.orderState + 1,
        orderId: this.orderInfo.id,
      };
      this.changeParams = params;
      if (this.orderInfo.orderState == 5) {
        return;
      }
      if (this.orderInfo.orderState == 1) {
        this.changeAddress = true;
        this.changeAddresstitle = "请选择装货地址";
        return;
      }
      if (this.orderInfo.orderState == 2) {
        this.addtype = 2;
        this.changeAddress = true;
        this.changeAddresstitle = "请选择卸货地址";
        return;
      }
      if (this.orderInfo.orderState == 3) {
        this.$Modal.confirm({
          title: "财务审核",
          content: "确认该运单通过财务审核确认？",
          loading: true,
          onOk: () => {
            let orderId = this.$route.query.id;
            let data = {
              orderId: orderId,
              state: 4,
            };
            changeOrderState(data).then((res) => {
              this.$Modal.remove();
              if (res.code == 200) {
                this.$Message.success("财务审核通过");
                this.getOrderDetail();
              } else {
                this.$Message.error(res.message);
              }
            });
          },
        });
        return;
      }
      // 4已签收'
      if (this.orderInfo.orderState == 4) {
        this.$Modal.confirm({
          title: "确认支付",
          content: "确认该运单通过确认支付确认？",
          loading: true,
          onOk: () => {
            let orderId = this.$route.query.id;
            let data = {
              orderId: orderId,
              state: 5,
            };
            changeOrderState(data).then((res) => {
              this.$Modal.remove();
              if (res.code == 200) {
                this.$Message.success("确认支付通过");
                this.getOrderDetail();
              } else {
                this.$Message.error(res.message);
              }
            });
          },
        });
        return;
      }
      if (this.orderInfo.orderState == 0) {
        changeOrderState(params).then((res) => {
          if (res.code == 200) {
            this.$Message.success("接单成功");
            this.getOrderDetail();
          } else {
            this.$Message.error(res.message);
          }
        });
        return;
      }
    },
    // 选择时间和地址
    changedetail() {
      if (this.addtype < 2) {
        if (this.changeTimes == "") {
          return this.$Message.error("请选择装货时间");
        }
        if (this.jingdu == "") {
          return this.$Message.error("请选择装货地址");
        }
        this.detaiLoading = true;
        saveOrderExtend({
          orderId: this.changeParams.orderId,
          vehicleNum: this.orderInfo.driverInfoVo.driverCode,
          lng: this.jingdu,
          lat: this.weidu,
          times: this.changeTimes,
          userId: this.changeParams.userId,
        }).then((res) => {
          this.detaiLoading = false;
          if (res.code == 200) {
            this.$Message.success("已成功装货");
            this.changeAddress = false;
            this.getOrderDetail();
          } else {
            this.$Message.error(res.message);
          }
        });
      } else {
        if (this.changeTimes == "") {
          return this.$Message.error("请选择卸货时间");
        }
        if (this.jingdu == "") {
          return this.$Message.error("请选择卸货地址");
        }

        updateOrderExtend({
          orderId: this.changeParams.orderId,
          vehicleNum: this.orderInfo.driverInfoVo.driverCode,
          lng: this.jingdu,
          lat: this.weidu,
          times: this.changeTimes,
          userId: this.changeParams.userId,
        }).then((res) => {
          if (res.code == 200) {
            this.$Message.success("已成功卸货");
            this.changeAddress = false;
            this.getOrderDetail();
          } else {
            this.$Message.error(res.message);
          }
        });
      }
    },
    getAge(value) {
      let birthdays = new Date(value);
      let age = birthdays.valueOf();
      return age;
    },
    getOrderDetail() {
      this.mobilePhoneTrack = [];
      getOrderVoInfo({ orderId: this.$route.query.id }).then((res) => {
        if (res.code == 200) {
          let a = null;
          if (res.result.companyInfoVo == a) {
            res.result.companyInfoVo = {
              mobile: "",
              companyName: "",
            };
          }
          this.orderInfo = res.result;
          let array = [];

          this.formRevised.platformUnitPrice = this.orderInfo.platformUnitPrice;
          this.formRevised.platformTotalPrice =
            this.orderInfo.platformTotalPrice;

          this.formRevised.driverUnitPrice = this.orderInfo.driverUnitPrice;
          this.formRevised.driverTotalPrice = this.orderInfo.driverTotalPrice;

          this.formRevised.transGoodWeight = this.orderInfo.transGoodWeight;
          this.formRevised.realGoodWeight = this.orderInfo.realGoodWeight;

          // 驾驶员名称
          let textName = "";
          if (this.orderInfo.driverInfoVo) {
            textName = this.orderInfo.driverInfoVo.nickName;
          }

          let text1 = "";
          let text2 = "";
          let text = "";
          if (textName.length == 3) {
            text1 = textName.substring(0, 1);
            text2 = textName.substring(textName.length - 1);
            text = `${text1}*${text2}`;
          } else if (textName.length > 3) {
            text1 = textName.substring(0, 1);
            text2 = textName.substring(textName.length - 1);
            text = `${text1}**${text2}`;
          } else {
            text1 = textName.substring(0, 1);
            text = `${text1}*`;
          }
          this.driverName = text;
          let Mobil1 = "";
          let Mobil2 = "";
          if (this.orderInfo.driverInfoVo) {
            let Mobil = this.orderInfo.driverInfoVo.mobile;
            Mobil1 = Mobil.substring(0, 3);
            Mobil2 = Mobil.substring(8);
            this.driverMobile = `${Mobil1}****${Mobil2}`;
          } else {
            this.driverMobile = "";
          }

          this.currentTime = this.getAge(new Date());
          this.Time1 = this.getAge(this.orderInfo.estimateLoadingTime);
          this.Time2 = this.getAge(this.orderInfo.startDate);
          this.Time3 = this.getAge(this.orderInfo.estimateDischargeTime);
          this.Time4 = this.getAge(this.orderInfo.endDate);
          if (this.orderInfo.vehicleInfoVo) {
            this.carryGoodWeight = this.orderInfo.vehicleInfoVo.approvedLoad; /// 1000
          }
          if (this.orderInfo.companyInfoVo.avatar) {
            if (this.orderInfo.companyInfoVo.avatar.indexOf(":") !== -1) {
              this.waybillAvatar = this.defaultAvatar;
            } else {
              this.waybillAvatar =
                this.$baseUrl + this.orderInfo.companyInfoVo.avatar;
            }
          } else {
            this.waybillAvatar = this.defaultAvatar;
          }

          if (this.orderInfo.content != null) {
            if (this.orderInfo.content.length >= 15) {
              let text1 = this.orderInfo.content.substring(0, 10);
              this.subRemarks = `${text1}....`;
            } else {
              this.subRemarks = this.orderInfo.content;
            }
          }
          if (this.orderInfo.vehicleInfoVo == null) {
            this.orderInfo.vehicleInfoVo = { vehicleNum: "" };
          }
          if (this.orderInfo.deliveryOrderPicId != null) {
            this.deliveryOrderPicUrl =
              this.$baseUrl + this.orderInfo.deliveryOrderPicId;
          }
          if (this.orderInfo.receiptOrderPicId != null) {
            this.receiptOrderPicUrl =
              this.$baseUrl + this.orderInfo.receiptOrderPicId;
          }
          if (
            this.orderInfo.transGoodWeight == null ||
            this.orderInfo.transGoodWeight == "0"
          ) {
            this.orderInfo.transGoodWeight = " - - ";
          }

          if (
            this.orderInfo.realGoodWeight == null ||
            this.orderInfo.realGoodWeight == "0"
          ) {
            this.orderInfo.realGoodWeight = " - - ";
          }

          this.tableData = [];

          const params = {
            name: "运费",
            freightUnitPrice: res.result.freightUnitPrice,
            realGoodWeight: res.result.realGoodWeight,
            transGoodWeight: res.result.transGoodWeight,
          };
          this.tableData.push(params);
          if (res.result.orderState >= 4) {
            // this.previewSettlement();
          } else {
            this.companySettlement = {};
            this.driverSettlement = {};
          }
          //  if ([3, 4].includes(res.result.orderState)) {
          //   this.current = 3;
          // } else
          if ([5, 6, 7].includes(res.result.orderState)) {
            this.current = 5;
          } else {
            this.current = res.result.orderState;
          }
          if (
            this.orderInfo.informationTips != "" &&
            this.orderInfo.informationTips != null
          ) {
            if (
              this.orderInfo.informationTips.charAt(
                this.orderInfo.informationTips.length - 1
              ) == ","
            ) {
              this.orderInfo.informationTips =
                this.orderInfo.informationTips.substring(
                  0,
                  this.orderInfo.informationTips.lastIndexOf(",")
                );
            }
            this.orderInfo.informationTipsVehicle =
              this.orderInfo.informationTips.split(",");
          } else {
            this.orderInfo.informationTipsVehicle =
              this.orderInfo.informationTips;
          }
          this.refreshModal();
          this.vehicleMapShow(array, 1);
          this.mobileMapShow(array, 1);
        }
      });
    },

    degrs() {},
    handleReachBottom() {
      if (this.InfiniteScroll == 2) {
        this.TouchThe = true;
        return false;
      } else {
        return new Promise((resolve) => {
          setTimeout(() => {
            this.TouchThe = false;
            this.InverseGeocoding(this.num + 20, this.newnum + 20);
            resolve();
          }, 1000);
        });
      }
    },
    getPosition(k) {
      AMap.plugin("AMap.Geocoder", () => {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: "010",
        });
        geocoder.getAddress(k, (status, result) => {
          if (status === "complete" && result.info === "OK") {
            // result为对应的地理位置详细信息
            this.caraddress = result.regeocode.formattedAddress;
            // if (
            //   result.regeocode.formattedAddress == "" ||
            //   result.regeocode.formattedAddress == null
            // ) {
            //   this.caraddress = "暂无车辆轨迹";
            // } else {

            // }
          }
        });
      });
    },
    InverseGeocoding(num, newnum) {
      if (this.refreshModalNme == 1) {
      } else {
      }
      var result = [];
      var obj = {};
      var resultArr = [];
      for (var i = 0; i < this.DrivingTrack.length; i++) {
        if (!obj[this.DrivingTrack[i].mlg]) {
          result.push(this.DrivingTrack[i]);
          obj[this.DrivingTrack[i].mlg] = true;
        }
      }
      resultArr = result.reverse();
        resultArr.forEach((item, index) => {
        item.mark = GPS.gcj_encrypt(Number(item.lat), Number(item.lon));
      });
      resultArr.forEach((item, index) => {
        if (item.lon && item.lat) {
          item.xy = item.mark.lon + "," + item.mark.lat + "|";
          if (item.mlg < 0) {
            item.mlg = resultArr[index + 1].mlg + 1;
          }
        }
      });

      if (num > resultArr.length) {
        this.InfiniteScroll = 2;
        this.TouchThe = true;
        return false;
      } else {
      }
      let arr = [];
      for (let index = num; index < resultArr.length; index++) {
        if (index == newnum) {
          break;
        } else {
          arr[index] = resultArr[index].xy;
        }
      }

      arr = arr.join("");
      arr = arr.slice(0, arr.length - 1);
      axios
        .get(
          "https://restapi.amap.com/v3/geocode/regeo?location=" +
            arr +
            "&key=" +
            Gaudemap +
            "&batch=" +
            true +
            " "
        )
        .then((res) => {
          res.regeocodes.forEach((item) => {
            this.VehiTlerajectory.push(item);
            this.scrollFun = false;
            this.num = num;
            this.newnum = newnum;
          });
          for (let index = 0; index < this.VehiTlerajectory.length; index++) {
            this.VehiTlerajectory[index].resul = resultArr[index];
          }
        })
        .catch((e) => {});
    },
    // 轨迹监控切换
    trackMonitoring() {
      this.refreshModal();
    },

    // 车辆轨迹
    vehicleMapShow(val, num) {
      if (num == 1) {
        let array = [];
        // array.push([this.orderInfo.beginLng, this.orderInfo.beginLat]);
        array.push([
          this.orderInfo.actualBeginLng
            ? this.orderInfo.actualBeginLng
            : this.orderInfo.beginLng,
          this.orderInfo.actualBeginLat
            ? this.orderInfo.actualBeginLat
            : this.orderInfo.beginLat,
        ]);
        this.vehiclemap = new AMap.Map("vehicleMap", {
          resizeEnable: true,
          center: array[0],
          zoom: 6,
        });
        let _this = this;
        AMap.plugin(["AMap.ToolBar"], function () {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          _this.vehiclemap.addControl(
            new AMap.ToolBar({
              // 简易缩放模式，默认为 false
              liteStyle: true,
            })
          );
        });
        //起点
        var beginAddressMap = new AMap.Marker({
          position: new AMap.LngLat(
            this.orderInfo.actualBeginLng
              ? this.orderInfo.actualBeginLng
              : this.orderInfo.beginLng,
            this.orderInfo.actualBeginLat
              ? this.orderInfo.actualBeginLat
              : this.orderInfo.beginLat
          ), //
          icon: new AMap.Icon({
            image: beginImg,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(42, 42),
          }),
        });
        this.vehiclemap.add(beginAddressMap);

        //终点
        var endAddressMap = new AMap.Marker({
          position: new AMap.LngLat(
            this.orderInfo.actualEndLng
              ? this.orderInfo.actualEndLng
              : this.orderInfo.endLng,
            this.orderInfo.actualEndLat
              ? this.orderInfo.actualEndLat
              : this.orderInfo.endLat
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({
            image: endImg,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(42, 42),
          }),
        });
        this.vehiclemap.add(endAddressMap);
      } else {
        this.vehiclemap = new AMap.Map("vehicleMap", {
          resizeEnable: true,
          center: val[0],
          zoom: 5,
        });
        let _this = this;
        AMap.plugin(["AMap.ToolBar"], function () {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          _this.vehiclemap.addControl(
            new AMap.ToolBar({
              // 简易缩放模式，默认为 false
              liteStyle: true,
            })
          );
        });

        this.num = 0;
        this.newnum = 20;
        this.InverseGeocoding(this.num, this.newnum);
        AMapUI.load(
          ["ui/misc/PathSimplifier", "lib/$"],
          function (PathSimplifier, $) {
            if (!PathSimplifier.supportCanvas) {
              alert("当前环境不支持 Canvas！");
              return;
            }
            var defaultRenderOptions = {
              renderAllPointsIfNumberBelow: -1, //绘制路线节点，如不需要可设置为-1
              pathLineStyle: {
                //路线样式设置
                lineWidth: 2,
                strokeStyle: "#3CB371",
                borderWidth: 1,
                borderStyle: "#eeeeee",
                dirArrowStyle: false,
              },
              startPointStyle: {
                //起点
                radius: 8,
                fillStyle: "#3CB371",
                lineWidth: 2,
                strokeStyle: "#eeeeee",
              },
              endPointStyle: {
                //终点
                radius: 8,
                fillStyle: "#3CB371",
                lineWidth: 2,
                strokeStyle: "#eeeeee",
              },
            };
            var pathSimplifierIns = new PathSimplifier({
              zIndex: 100,
              //autoSetFitView:false,
              map: _this.vehiclemap, //所属的地图实例
              getPath: function (pathData, pathIndex) {
                return pathData.path;
              },
              getHoverTitle: function (pathData, pathIndex, pointIndex) {
                if (pointIndex >= 0) {
                  //point
                  return (
                    pathData.name +
                    "，点：" +
                    pointIndex +
                    "/" +
                    pathData.path.length
                  );
                }
                return pathData.name + "，点数量" + pathData.path.length;
              },
              renderOptions: defaultRenderOptions,
            });
            window.pathSimplifierIns = pathSimplifierIns;
            //设置数据
            pathSimplifierIns.setData([
              {
                name: "路线0", //设置路线的初始地
                path: val,
              },
            ]);
            var navg1 = pathSimplifierIns.createPathNavigator(0, {
              loop: false,
              speed: 100000,
              pathNavigatorStyle: {
                // width: 30,
                // height: 30,
                // // //使用图片
                // content: PathSimplifier.Render.Canvas.getImageContent(
                //   carMapImg,
                //   onload,
                //   onerror
                // ),
                //经过路径的样式
                pathLinePassedStyle: {
                  lineWidth: 6,
                  strokeStyle: "#087ec4",
                  dirArrowStyle: {
                    stepSpace: 15,
                    strokeStyle: "#FFFFFF",
                  },
                },
              },
            });
            navg1.start();
          }
        );
        // onRegeocodeSearched
        //当前位置
        let k = val.length - 1;
        let lnglat = val[k];
        this.getPosition(lnglat);
        //起点
        var beginAddressMap = new AMap.Marker({
          position: new AMap.LngLat(
            this.orderInfo.actualBeginLng
              ? this.orderInfo.actualBeginLng
              : this.orderInfo.beginLng,
            this.orderInfo.actualBeginLat
              ? this.orderInfo.actualBeginLat
              : this.orderInfo.beginLat
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({
            image: beginImg,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(42, 42),
          }),
        });
        this.vehiclemap.add(beginAddressMap);

        //终点
        var endAddressMap = new AMap.Marker({
          position: new AMap.LngLat(
            this.orderInfo.actualEndLng
              ? this.orderInfo.actualEndLng
              : this.orderInfo.endLng,
            this.orderInfo.actualEndLat
              ? this.orderInfo.actualEndLat
              : this.orderInfo.endLat
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({
            image: endImg,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(42, 42),
          }),
        });
        this.vehiclemap.add(endAddressMap);
      }
    },
    // 手机轨迹
    mobileMapShow(val, num) {
      if (num == 1) {
        // let row = JSON.parse(this.$route.query.row);
        let valuearr = [];
        valuearr.push([
          this.orderInfo.actualBeginLng
            ? this.orderInfo.actualBeginLng
            : this.orderInfo.beginLng,
          this.orderInfo.actualBeginLat
            ? this.orderInfo.actualBeginLat
            : this.orderInfo.beginLat,
        ]);
        this.mobilemap = new AMap.Map("mobileMap", {
          resizeEnable: true,
          center: valuearr[0],
          zoom: 6,
        });
        let _this = this;
        AMap.plugin(["AMap.ToolBar"], function () {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          _this.mobilemap.addControl(
            new AMap.ToolBar({
              // 简易缩放模式，默认为 false
              liteStyle: true,
            })
          );
        });
        //起点
        var beginAddressMap = new AMap.Marker({
          position: new AMap.LngLat(
            this.orderInfo.actualBeginLng
              ? this.orderInfo.actualBeginLng
              : this.orderInfo.beginLng,
            this.orderInfo.actualBeginLat
              ? this.orderInfo.actualBeginLat
              : this.orderInfo.beginLat
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({
            image: beginImg,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(42, 42),
          }),
        });
        this.mobilemap.add(beginAddressMap);
        //终点
        var endAddressMap = new AMap.Marker({
          position: new AMap.LngLat(
            this.orderInfo.actualEndLng
              ? this.orderInfo.actualEndLng
              : this.orderInfo.endLng,
            this.orderInfo.actualEndLat
              ? this.orderInfo.actualEndLat
              : this.orderInfo.endLat
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({
            image: endImg,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(42, 42),
          }),
        });
        this.mobilemap.add(endAddressMap);
      } else {
        // let valuearr = [];
        // valuearr.push([this.orderInfo.beginLng, this.orderInfo.beginLat]);
        this.mobilemap = new AMap.Map("mobileMap", {
          resizeEnable: true,
          center: val[0],
          zoom: 6,
        });
        let _this = this;
        AMap.plugin(["AMap.ToolBar"], function () {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          _this.mobilemap.addControl(
            new AMap.ToolBar({
              // 简易缩放模式，默认为 false
              liteStyle: true,
            })
          );
        });

        //起点
        var beginAddressMap = new AMap.Marker({
          position: new AMap.LngLat(
            this.orderInfo.actualBeginLng
              ? this.orderInfo.actualBeginLng
              : this.orderInfo.beginLng,
            this.orderInfo.actualBeginLat
              ? this.orderInfo.actualBeginLat
              : this.orderInfo.beginLat
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({
            image: beginImg,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(42, 42),
          }),
        });
        this.mobilemap.add(beginAddressMap);
        //终点
        var endAddressMap = new AMap.Marker({
          position: new AMap.LngLat(
            this.orderInfo.actualEndLng
              ? this.orderInfo.actualEndLng
              : this.orderInfo.endLng,
            this.orderInfo.actualEndLat
              ? this.orderInfo.actualEndLat
              : this.orderInfo.endLat
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: new AMap.Icon({
            image: endImg,
            size: new AMap.Size(52, 52), //图标大小
            imageSize: new AMap.Size(42, 42),
          }),
        });
        this.mobilemap.add(endAddressMap);
        this.mobileNum = 0;
        this.mobileNewnum = 20;
        this.mobileGeocoding(this.mobileNum, this.mobileNewnum);

        AMapUI.load(
          ["ui/misc/PathSimplifier", "lib/$"],
          function (PathSimplifier, $) {
            if (!PathSimplifier.supportCanvas) {
              alert("当前环境不支持 Canvas！");
              return;
            }
            var defaultRenderOptions = {
              renderAllPointsIfNumberBelow: -1, //绘制路线节点，如不需要可设置为-1
              pathLineStyle: {
                //路线样式设置
                lineWidth: 2,
                strokeStyle: "#3CB371",
                borderWidth: 1,
                borderStyle: "#eeeeee",
                dirArrowStyle: false,
              },
              startPointStyle: {
                //起点
                radius: 8,
                fillStyle: "#3CB371",
                lineWidth: 2,
                strokeStyle: "#eeeeee",
              },
              endPointStyle: {
                //终点
                radius: 8,
                fillStyle: "#3CB371",
                lineWidth: 2,
                strokeStyle: "#eeeeee",
              },
            };
            var pathSimplifierIns = new PathSimplifier({
              zIndex: 100,
              //autoSetFitView:false,
              map: _this.mobilemap, //所属的地图实例
              getPath: function (pathData, pathIndex) {
                return pathData.path;
              },
              getHoverTitle: function (pathData, pathIndex, pointIndex) {
                if (pointIndex >= 0) {
                  //point
                  return (
                    pathData.name +
                    "，点：" +
                    pointIndex +
                    "/" +
                    pathData.path.length
                  );
                }
                return pathData.name + "，点数量" + pathData.path.length;
              },
              renderOptions: defaultRenderOptions,
            });
            window.pathSimplifierIns = pathSimplifierIns;

            //设置数据
            pathSimplifierIns.setData([
              {
                name: "路线0", //设置路线的初始地
                path: val, //lineArr
              },
            ]);
            var navg1 = pathSimplifierIns.createPathNavigator(0, {
              loop: false,
              speed: 100000,
              pathNavigatorStyle: {
                //经过路径的样式
                pathLinePassedStyle: {
                  lineWidth: 6,
                  strokeStyle: "#087ec4",
                  dirArrowStyle: {
                    stepSpace: 15,
                    strokeStyle: "#FFFFFF",
                  },
                },
              },
            });
            navg1.start();
          }
        );
      }
    },
    // 手机轨迹滑动
    mobilehandleScroll(e) {
      this.mobileboxScrollTop = this.$refs.mobilepersonDom.scrollTop; //滑入屏幕上方的高度
      this.mobileboxWindowHeitht = this.$refs.mobilepersonDom.clientHeight; //能看到的页面的高度
      this.mobileboxScrollHeight = this.$refs.mobilepersonDom.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
      this.mobileboxHeight =
        this.mobileboxScrollTop + this.mobileboxWindowHeitht;
      if (
        Math.round(this.mobileboxHeight - 30) ==
        this.mobileboxScrollHeight - 30
      ) {
        if (!this.mobilescrollFun) {
          this.mobilescrollFun = true;
          if (this.mobileInfiniteScroll == 2) {
            this.mobilTouchThe = true;
            return false;
          } else {
            this.mobilTouchThe = false;
            this.mobileGeocoding(this.mobileNum + 20, this.mobileNewnum + 20);
          }
        }
      }
    },
    // 手机轨迹
    mobileGeocoding(num, newnum) {
      var result = [];
      var obj = {};
      var resultArr = [];
      let mm = 60000;
      let mobileid = "";
      for (var i = 0; i < this.mobilePhoneData.length; i++) {
        this.mobilePhoneData[i].mobileid = i;
        // result.push(this.mobilePhoneData[i]);
        if (!obj[this.mobilePhoneData[i].mobileid]) {
          result.push(this.mobilePhoneData[i]);
          obj[this.mobilePhoneData[i].mobileid] = true;
        }
      }
      resultArr = result.reverse();
    resultArr.forEach((item, index) => {
        item.mark = GPS.gcj_encrypt(Number(item.lat), Number(item.lon));
      });
      resultArr.forEach((item, index) => {
        if (item.lon && item.lat) {
          item.xy = item.mark.lon + "," + item.mark.lat + "|";
          let time1 = new Date(item.updateTime).valueOf() / 1000;
          if (index === resultArr.length - 1) return;
          let time2 =
            new Date(resultArr[index + 1].updateTime).valueOf() / 1000;
          let nums = 60 * 1;
          if (time1 - time2 > nums) {
            let minute = time1 - time2;
            item.parkingText = "停车: " + Math.round(minute / 60) + " 分钟";
          } else {
            item.parkingText = "";
          }
        }
      });

      let arr = [];
      for (let index = num; index < resultArr.length; index++) {
        if (index == newnum) {
          break;
        } else {
          arr[index] = resultArr[index].xy;
        }
      }
      if (num > resultArr.length) {
        this.mobileInfiniteScroll = 2;
        this.mobilTouchThe = true;
        return false;
      } else {
      }

      arr = arr.join("");
      arr = arr.slice(0, arr.length - 1);
      axios
        .get(
          "https://restapi.amap.com/v3/geocode/regeo?location=" +
            arr +
            "&key=" +
            Gaudemap +
            "&batch=" +
            true +
            " "
        )
        .then((res) => {
          res.regeocodes.forEach((item) => {
            this.mobilePhoneTrack.push(item);
            this.mobilescrollFun = false;
            this.mobileNum = num;
            this.mobileNewnum = newnum;
          });
          for (let index = 0; index < this.mobilePhoneTrack.length; index++) {
            let item = this.mobilePhoneTrack[index];
            item.resuls = resultArr[index];
          }
        })
        .catch((e) => {});
    },
    // 刷新
    refreshModal() {
      this.refreshLoading = true;
      this.boxHeight = 0;
      this.boxScrollHeight = 0;
      this.TouchThe = false;

      this.boxScrollTop = 0;
      this.boxWindowHeitht = 0;
      this.InfiniteScroll = 1;
      this.num = 0;
      this.newnum = 20;
      this.$refs.personDom.scrollTop = 0; //滑入屏幕上方的高度

      this.mobileboxScrollTop = 0;
      this.mobileboxWindowHeitht = 0;
      this.mobileboxScrollHeight = 0;
      this.mobileboxHeight = 0;
      this.mobilTouchThe = false;

      this.mobileInfiniteScroll = 1;
      this.mobileNum = 0;
      this.mobileNewnum = 20;
      this.mobilescrollFun = true;
      // this.$refs.mobilepersonDom.clientHeight = 0; //能看到的页面的高度
      // this.$refs.mobilepersonDom.scrollHeight = 0; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
      this.$refs.mobilepersonDom.scrollTop = 0; //滑入屏幕上方的高度
      this.mobileMaplist = [];
      this.mobilePhoneTrack = [];
      if (
        this.orderInfo.orderState == "0" ||
        this.orderInfo.orderState == "1" ||
        this.orderInfo.orderState == "-1"
      ) {
        return false;
      } else {
        if (this.trajectoryMonitor == "vehicleMapName") {
          getTracks({ orderId: this.$route.query.id }).then((res) => {
            this.refreshLoading = false;
            if (res.code == 200) {
            } else {
            }
            // console.log(res.result);
            this.VehiTlerajectory = [];
            if (res.code == 500) {
              let array = [];
              this.vehicleMapShow(array, 1);
              return this.$Message.info("暂无轨迹数据 !");
            }
            if (res.result.length == 0) {
              let arr = [];
              this.vehicleMapShow(arr, 1);

              return this.$Message.info("暂无轨迹数据 !");
            }
            if (res.result.length == 0) {
              return false;
            }
            let resmlg = res.result[0].mlg;
            this.DrivingTrack = res.result;
            this.DrivingTrack.forEach((item) => {
              item.mlg = parseInt((item.mlg - resmlg) / 10);
              // console.log(item.mlg);
            });

            let longitude = res.result;
            let f = longitude.length - 1;
            let val = longitude[f];
            let aval = longitude[0];
            this.carspd = parseInt(val.spd / 10);

            this.carmlg = parseInt(val.mlg - aval.mlg);

            this.modal1 = true;
            let array = [];
            let listarr = res.result;
            for (let i = 0; i < listarr.length; i++) {
              let arr = [];
              arr[0] = listarr[i].lon + "";
              arr[1] = listarr[i].lat + "";
              array.push(arr);
            }
            if (this.orderInfo.orderState >= 2) {
              this.mobileMaplist = array;
              this.vehicleMapShow(array);
            } else {
              let arr = [];
              this.vehicleMapShow(arr, 1);
            }
          });
        } else {
          this.refreshLoading = false;
          // 手机
          getMobileTrack({ orderId: this.$route.query.id }).then((res) => {
            if (res.code == 200) {
            } else {
            }
            this.mobilePhoneList = [];
            if (res.code == 500) {
              let array = [];
              if (res.result.orderState != "0") {
                this.mobileMapShow(array, 1);
                return this.$Message.info("暂无轨迹数据 !");
              }
            }
            if (res.result.length == 0) {
              let arr = [];
              this.mobileMapShow(arr, 1);
              return this.$Message.info("暂无轨迹数据 !");
            }
            if (res.result.length == 0) {
              return false;
            }
            let resmlg = res.result[0].mlg;
            this.mobilePhoneData = res.result;
            this.mobilePhoneData.forEach((item) => {
              item.mlg = parseInt((item.mlg - resmlg) / 10);
            });
            let longitude = res.result;
            let f = longitude.length - 1;
            let val = longitude[f];
            let aval = longitude[0];
            this.carspd = parseInt(val.spd / 10);

            this.carmlg = parseInt(val.mlg - aval.mlg);
            this.modal1 = true;
            let array = [];
            let listarr = res.result;
            for (let i = 0; i < listarr.length; i++) {
              let arr = [];
              if (listarr[i].lon && listarr[i].lat) {
                arr[0] = listarr[i].lon + "";
                arr[1] = listarr[i].lat + "";
                array.push(arr);
              } else {
                this.mobileMapShow(arr, 1);
              }
            }
            if (this.orderInfo.orderState >= 2) {
              this.mobileMaplist = array;
              this.mobileMapShow(array, 2);
            } else {
              let arr = [];
              this.mobileMapShow(arr, 1);
            }
          });
        }
      }
    },
    onChangeCell(val, key, index) {
      this.tableData2[index][key] = val;
    },
    onChangeCellTab3(val, key, index) {
      this.tableData3[index][key] = val;
    },
    // 订正装载吨数
    tranOrder() {
      this.preImgList = [];
      this.tranModal = true;
      this.yNewNumber = this.orderInfo.transGoodWeight;
      this.qNewNumber = this.orderInfo.realGoodWeight;
      this.grossNumber = this.orderInfo.grossWeight;
      this.revisedTitle = `订正吨位  ( ${this.orderInfo.driverInfoVo.nickName} ${this.orderInfo.vehicleInfoVo.vehicleNum} )`;
      if (this.orderInfo.deliveryOrderPicId) {
        this.preImgList.push({
          img: this.imgFormat(this.orderInfo.deliveryOrderPicId),
          tiem: "装货磅单 " + this.orderInfo.loadingTime,
        });
      }
      if (this.orderInfo.receiptOrderPicId) {
        this.preImgList.push({
          img: this.imgFormat(this.orderInfo.receiptOrderPicId),
          tiem: "卸货榜单 " + this.orderInfo.dischargeTime,
        });
      }
    },
    // 图片格式化
    imgFormat(val) {
      let img = "";
      if (val) {
        img = this.$baseUrl + val;
      }
      return img;
    },
    showPic(v) {
      let image = new Image();
      if (v == 1) {
        image.src = this.deliveryOrderPicUrl;
      } else if (v == 2) {
        image.src = this.receiptOrderPicUrl;
      } else if (v == 3) {
        image.src = this.manCarOrderPicUrl;
      } else {
        image.src = this.manGoodsOrderPicUrl;
      }
      let viewer = new Viewer(image, {
        hidden: function () {
          viewer.destroy();
        },
      });
      viewer.show();
    },
    // 修改装载吨数
    modifyTranClick() {
      this.tranLoading = true;
      const params = {
        orderId: this.orderInfo.id,
        transGoodWeight: this.yNewNumber,
        realGoodWeight: this.qNewNumber,
      };
      uploadOrderInfo(params).then((res) => {
        this.tranLoading = false;
        if (res.code == 200) {
          this.$Message.success("订正成功");
          this.getOrderDetail();
          this.tranModal = false;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    cancelMap() {
      this.modal1 = false;
    },

    //////////////////////////////////////////////////////////
    // 删除图片
    handleRemoveComplaint(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    // 成功
    handleSuccessComplaint(res, file, fileList) {},
    // 文件格式验证失败时的钩子
    handleFormatError(file) {
      this.$Message.error("图片格式错误,指定上传图片格式 jpg、jpeg、png");
    },
    // 文件超出指定大小限制时的钩子
    handleMaxSize(file) {
      this.$Message.error("图片超出了最大存储限制");
    },
    //压缩图片
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        // console.log("压缩前", file); // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
        imageConversion.compressAccurately(file, 100).then((res) => {
          res = new File([res], file.name, {
            type: res.type,
            lastModified: Date.now(),
          });
          resolve(res);
        });
      });
    },
    // 上传文件之前的钩子，参数为上传的文件
    handleBeforeUploadComplaint(file) {
      const check = this.uploadList.length < 3;
      if (!check) {
        this.$Message.error("一次最多上传三张图片");
        return false;
      }
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const _base64 = reader.result;
        file.url = _base64;
        this.uploadList.push(file);
      };
      this.uploadList = this.$refs.upload.fileList;
      this.fileall = file;
      return false;
    },
  },
};
</script>

<style>
.box {
  margin-top: 15px;
  /* border-bottom: 1px solid #eee; */
  margin-bottom: 5px;
}
.el-descriptions__header {
  margin-bottom: 15px;
}
#pickerBoxadd {
position: absolute;
  z-index: 99999;
  top: 0px;
  right: 50px !important;
  height: 290px !important;
  /* width: 300px; */
  overflow: auto;
}

#pickerInputthree {
  width: 200px;
  padding: 5px 5px;
}
.amap-ui-poi-picker-sugg-container {
  max-height: 200px !important;
}
.beginProvinceNamecss {
  width: 200px;
}
.transGoodWeightsize {
  font-weight: 800;
}
.uploadimg {
  padding: 5px 9px 5px;
  height: 130px;
}
.boximg {
  display: flex;
  border: 1px solid #eee;
  height: 130px;
}
#cardhgth {
  height: 50%;
}

.uploadimgss {
  margin-top: 10px;
  display: flex;
}
.demo-uploadcss {
  margin-top: -50px;
  width: 100px;
  height: 5px;
}
.Weight-content {
  background: #fde2e2;
}
.Weight-label {
  background: #fde2e2;
}
</style>
<style lang="less"  scoped>
.person {
  height: 295px;
  overflow-y: scroll;
}
.MapShow {
  height: 300px;
  margin-left: 25px;
}

.hover {
  color: #ffa500;
}
.waybillnewcarrier {
  margin-top: 10px;
  margin-left: 20px;
  display: flex;
  .waybilln {
    margin-top: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #eee;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .waybiInformation {
    padding: 25px 0;
    margin-left: 17px;
    .carriervehicleMapName {
      margin-left: 10px;
      color: #999999;
    }
  }
  .waybiInf-company {
    margin-top: 10px;
    cursor: pointer;
  }
}
.carrier {
  position: relative;
  top: -10px;
  left: 50px;
  font-size: 14px;
  font-weight: 600;
}
.drivercarrier {
  position: relative;
  top: -10px;
  left: 40px;
  font-size: 14px;
  font-weight: 600;
}
.waybillName {
  position: absolute;
  top: 60px;
  left: 42px;
  font-size: 14px;
  font-weight: 600;
}
.deeltesWays {
  width: 65px;
  background-color: rgb(70, 136, 71);
  color: #fff;
  padding: 2px 0;
  text-align: center;
  font-size: 12px;
  margin-left: 9px;
  border-radius: 3px;
  display: inline-block;
  height: 22px;
  margin-bottom: -8px;
}
.dertiemWaybill {
  padding-top: 35px;
  margin-right: 15px;
  .implementedWay,
  .AuditFailedWay,
  .quotationWay,
  .deeltesWay,
  .signFor {
    width: 65px;
    margin-bottom: 10px;
    // background-color: rgb(70, 136, 71);
    color: #fff;
    padding: 2px 0;
    text-align: center;
    font-size: 12px;
    margin-left: 9px;
    border-radius: 3px;
    display: inline-block;
  }
}

.signFor {
  background-color: #468847;
}
.AuditFailedWay {
  width: 65px !important;
  background-color: #ff8700;
}
.implementedWay {
  background-color: #2d8cf0;
}
.deeltesWay {
  background-color: #d3d3d3;
}
.Line {
  // border-bottom: 1px solid #eee;
  // border-bottom-color: rgb(255, 255, 255);
  border: 0;
  border-top: 1px solid #eee;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(238, 238, 238);
  border-bottom: 1px solid #fff;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(255, 255, 255);
  margin: 20px 0;
}
.carrieright {
  margin-left: -150px;
}
.urgent,
.normal {
  width: 50px;
  margin-bottom: 10px;
  background-color: #dc143c;
  color: #fff;
  // line-height: 55px;
  padding: 2px 0;
  text-align: center;
  font-size: 12px;
  margin-left: 15px;
  border-radius: 3px;
  display: inline-block;
  // margin-left: 31px;
}
.normal {
  background-color: rgb(70, 136, 71);
}
.lInsuoad {
  margin-top: -10px;
  display: flex;
}
.upledDaiss {
  margin-top: 10px;
  margin-left: 15px;
  width: 300px;
  position: relative;
  bottom: -11px;
  left: -7px;
}
.lInsugScarry {
  position: relative;
  top: 17px;
  left: 0px;
}
.demo-upload-list-waybill {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list-waybill img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-waybill-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list-waybill:hover .demo-upload-list-waybill-cover {
  display: block;
}
.demo-upload-list-waybill-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.border_card {
  margin: 5px 0;
  border: 1px dashed #a9a9a9;
}
.replyinptu {
  textarea.ivu-input {
    border: 1px solid transparent;
    outline: none;
    border: none;
    box-shadow: 0 0 0 2px transparent;
    // border-bottom: 1.3px solid gainsboro;
  }
}
.trajectory {
  font-size: 16px;
  font-weight: 700;
  margin-top: 15px;
}
.refreshButme {
  position: relative;
  top: 8px;
  right: 5px;
  border: 1px solid #eee;
  border-radius: 5px;
  z-index: 9999;
  cursor: pointer;
}
.ivu-tabs-nav .ivu-tabs-tab {
  position: relative;
  top: 10px;
  left: 5px;
}
.my-content {
  width: 150px;
}
.my-limitation {
  width: 170px;
}
.ontain {
  height: 220px;
  overflow-y: scroll;
}
.listItem {
  padding: 7px;
  font-size: 14px;
  border-bottom: 1px #333 dotted;
}
.NotFilled {
  font-size: 14px;
  color: #a9a9a9;
}
.driverDiptions {
  width: 80px;
  height: 43px;
  text-align: center;
  line-height: 43px;
  color: #606266;
  border: 1px solid #ebeef5;
  background-color: #fff;
}
.driverBtn {
  width: 80px;
  height: 43px;
  text-align: center;
  line-height: 43px;
  color: #606266;
  background-color: #2d8cf0;
}
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.table table {
  // table-layout: auto;
  width: 100% !important;
}
.uploTransit {
  width: 300px;
  position: absolute;
  bottom: 76px;
  left: 25px;
}
.evaluation-head {
  margin-left: 92px;
  margin-bottom: 10px;
}
.evaluationTitle {
  padding-left: 30px;
  padding-right: 10px;
  color: rgb(208, 196, 222);
}
.evaluationText {
  padding-left: 10px;
}
.popover-Tags {
  margin-top: 3px;
}
.PresenceAnd {
  height: 25px;
  padding-top: 2px;
}
.mobilMapShowh {
  height: 300px;
  margin-left: 25px;
}
.mobileperson {
  height: 295px;
  // overflow-y: scroll;
  overflow: scroll;
}
.modifyTonnage {
  width: 50%;
}
.cancellation {
  color: red;
}
.imgboxele {
  width: 600px;
  height: 450px;
  object-fit: scale-down;
  /* object-fit: cover; */
  /* flex: 1; */
}
.imgpod {
  margin-top: 58px;
  width: 50%;
  height: 100%;
  padding: 20px 0;
}
.viewer-img-title {
  height: 30px;
  background-color: #f8f8f9;
  padding: 5px;
  // border-radius: 7px;
  font-weight: 600;
  // position: absolute;
  left: 16px;
}
</style>